.wow {
	opacity: 0;
}
.mobile {
	width: 100%;
}
.mobile-inner {
	margin-right: auto;
	margin-left: auto;
background-color:;
	position: relative;
}
.mobile-inner img {
}
.mobile-inner p {
	color: #676767;
	line-height: 25px;
	font-size: 16px;
	padding-bottom: 30px;
	padding-right: 30px;
	padding-left: 30px;
	margin: 0px;
}
.mobile-inner-header {
	background-color: rgb(255,255,255);
	width: 100%;
	height: 50px;
	position: relative;
	top: 0px;
	z-index: 33;
	left: 0px;
}
.mobile-inner-header-icon {
	color: #ffffff;
	height: 50px;
	font-size: 25px;
	text-align: center;
	float: right;
	width: 50px;
	position: relative;
	-webkit-transition: background 0.5s;
	-moz-transition: background 0.5s;
	-o-transition: background 0.5s;
	transition: background 0.5s;
}
.mobile-inner-header-icon:hover {
	background-color: rgba(255,255,255,0.2);
	cursor: pointer;
}
.mobile-inner-header-icon span {
	position: absolute;
	left: calc((100% - 25px) / 2);
	top: calc((100% - 1px) / 2);
	width: 25px;
	height: 1px;
	background-color: #1A6840;
}
.mobile-inner-header-icon span:nth-child(1) {
	transform: translateY(4px) rotate(0deg);
}
.mobile-inner-header-icon span:nth-child(2) {
	transform: translateY(-4px) rotate(0deg);
}
.mobile-inner-header-icon-click span:nth-child(1) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: clickfirst;
}
.mobile-inner-header-icon-click span:nth-child(2) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: clicksecond;
}
@keyframes clickfirst {
0% {
transform:translateY(4px) rotate(0deg);
}
100% {
transform:translateY(0) rotate(45deg);
}
}
@keyframes clicksecond {
0% {
transform:translateY(-4px) rotate(0deg);
}
100% {
transform:translateY(0) rotate(-45deg);
}
}
.mobile-inner-header-icon-out span:nth-child(1) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: outfirst;
}
.mobile-inner-header-icon-out span:nth-child(2) {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: outsecond;
}
@keyframes outfirst {
0% {
transform:translateY(0) rotate(-45deg);
}
100% {
transform:translateY(-4px) rotate(0deg);
}
}
@keyframes outsecond {
0% {
transform:translateY(0) rotate(45deg);
}
100% {
transform:translateY(4px) rotate(0deg);
}
}
.mobile-inner-nav {
	overflow: auto;
	max-height: calc(100vh - 50px);
}
.mobile-inner-nav {
	background-color: rgb(65 78 113 / 90%);
	width: 100%;
	position: absolute;
	top: 50px;
	padding-bottom: 0%;
	display: none;
	z-index: 444;
}
.mobile-inner-nav a {
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	color: #fff;
	transition: all 0.5s;
}
.mobile-inner-nav dl {
	display: none;
}
.mobile-inner-nav dl dd {
	line-height: 33px;
	text-decoration: none;
	text-indent: 3em;
	font-size: 16px;
	color: #FFFFFF;
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	font-weight: 300;
	font-size: 14px;
}
.mobile-inner-nav li {
	border-bottom: solid 1px rgba(255,255,255,0.3);
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	line-height: 53px;
	text-indent: 20px;
}
.mobile-inner-nav h2.h2tit {
	line-height: 50px;
	text-decoration: none;
	text-indent: 2em;
	font-size: 16px;
	color: #FFFFFF;/* border-bottom:solid 1px rgba(255,255,255,0.3); */
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	font-weight: 300;
}
.mobile-inner-nav h2.h2tit a {
	color: #FFFFFF;
}
.mobile-inner-nav a {
	border-bottom: none;
}
.mobile-inner-nav li {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: returnToNormal;
	animation-name: returnToNormal;
}
@-webkit-keyframes resize {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:0;
-webkit-transform:scale(5, 5);
transform:scale(5, 5);
}
100% {
opacity:1;
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
}
@keyframes resize {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function:cubic-bezier(0.215, 0.610, 0.355, 1.000);
}
0% {
opacity:0;
-webkit-transform:scale(5, 5);
transform:scale(5, 5);
}
100% {
opacity:1;
-webkit-transform:scale(1, 1);
transform:scale(1, 1);
}
}
@-webkit-keyframes returnToNormal {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
@keyframes returnToNormal {
from {
opacity:0;
-webkit-transform:translate3d(0, 100%, 0);
transform:translate3d(0, 100%, 0);
}
to {
	opacity: 1;
	-webkit-transform: none;
	transform: none;
}
}
.mobile-inner-nav li:last-child h2.h2tit {
	border-bottom: none;
}
.mobile-inner-nav li .h3tit {
	height: 50px;
	position: relative;
	background: url(../images/51_icon_search@2x.png) no-repeat 30px center;
	background-size: 17px;
}
.mobile-inner-nav li .words {
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	background: none;
	text-indent: 60px;
	font-size: 15px;
	color: #fff;
	background: url(../images/search2.png) no-repeat 30px center;
	background-size: 20px;
}
.mobile-inner-nav li:last-child {
	border-bottom: none;
}
.mobile-inner-nav li form {
	display: block;
	width: 100%;
	height: 100%;
}
@charset "utf-8";
@charset "UTF-8";
.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}
.animated.infinite {
	animation-iteration-count: infinite;
}
.animated.hinge {
	animation-duration: 2s;
}
.fadeInUp {
	animation-duration: 1.76s;
	animation-name: fadeInUp;
}
@keyframes fadeInUp {
from {
opacity:0;
transform:translate3d(0, 40px, 0);
}
to {
	opacity: 1;
	transform: none;
}
}
* {
	/*font-family: PingFangSC-Regular, PingFang SC, "Microsoft YaHei", "Arial";*/
}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr, span {
	margin: 0;
	padding: 0;
}
html {
	font-size: 62.5%;
}
body {
	font-size: 1.4rem;
}
html, body {
	/*-moz-user-select: none;
	-khtml-user-select: none;
	user-select: none;*/
}
body {
	font-family: "Microsoft YaHei" ! important;
	color: #000000;
	background: #fff;
	margin: 0 auto;
	padding: 0px;
}
body {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
select {
	cursor: pointer;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"] {
	-webkit-appearance: none;
}
input[type="button"], input[type="submit"], input[type="reset"] {
	cursor: pointer;
}
input {
/* -webkit-appearance: none; */
}
input {/* -webkit-appearance:none!important; *//* border-radius:0; */
}
button {
	cursor: pointer;
}
textarea {
	-webkit-appearance: none;
}
a {
	text-decoration: none;
	color: #235aa7;
	outline: none;
}
a:active {
star:expression(this.onFocus=this.blur());
}
img {
	border: 0px;
	vertical-align: middle;
}
li {
	list-style: none;
}
* {
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.loading {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: #fff;
	z-index: 99999;
}
.loadingfa {
	width: 50px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 29px;
	color: #1f8adf;
	position: absolute;
	left: 50%;
	margin-top: -25px;
	margin-left: -25px;
	top: 50%;
}
html {
	-webkit-overflow-scrolling: touch;
	-webkit-tap-highlight-color: none;
}
html {
	-webkit-tap-highlight-color: transparent;
}
body {
	-webkit-overflow-scrolling: touch;
}
* {
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-webkit-tap-highlight-color: transparent;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	/*user-select: none;*/
}
 @keyframes rotate {
from {
-webkit-transform:rotate(0deg)
}
to {
	-webkit-transform: rotate(360deg)
}
}
@-webkit-keyframes rotate {
from {
-webkit-transform:rotate(0deg)
}
to {
	-webkit-transform: rotate(360deg)
}
}
@-moz-keyframes rotate {
from {
-moz-transform:rotate(0deg)
}
to {
	-moz-transform: rotate(360deg)
}
}
@-ms-keyframes rotate {
from {
-ms-transform:rotate(0deg)
}
to {
	-ms-transform: rotate(360deg)
}
}
@-o-keyframes rotate {
from {
-o-transform:rotate(0deg)
}
to {
	-o-transform: rotate(360deg)
}
}
.xuanzhuan {
	animation: 2s linear 0s normal forwards infinite rotate;
	-webkit-animation: 2s linear 0s normal forwards infinite rotate;
	-moz-animation: 2s linear 0s normal forwards infinite rotate;
	-o-animation: 2s linear 0s normal forwards infinite rotate;
}
.xuanzhuan img {
	display: block;
	width: 100%;
}
.pc {
	display: block;
}
.wap {
	display: none;
}
.clearflex:after {
	content: "";
	display: table;
	clear: both;
}
/* container */
.container {
 width: calc(1400 / 1920 * 100vw);
	max-width: 1400px;
	margin: 0 auto;
}
/* ================= HEADER ================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 6666;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(6px);
	background-color: rgb(120 120 120 / 35%);
}
.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.header__logo img {
 height: calc(63 / 1920 * 100vw);
 margin-left: calc(80 / 1920 * 100vw);
}
.header__nav {
}
.nav {
	display: flex;
 gap: calc(20 / 1920 * 100vw);
}
.nav__item {
	color: #fff;
	cursor: pointer;
	position: relative;
}
.nav__item:hover .h2tit a, .nav__item.current .h2tit a {
	background-color: #FFFFFF33 !important;
	color: #1A6840;
}
.nav__item:hover .h2tit a:after, .nav__item.current .h2tit a:after {
	width: 100%;
}
.nav__item .h2tit a:after {
	height: 2px;
	content: '';
	width: 0px;
	left: 0px;
	top: 0px;
	background: #1A6840;
	position: absolute;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.nav__item .h2tit a {
	font-weight: normal;
 font-size: calc(18 / 1920 * 100vw);
	color: #fff;
	display: block;
 line-height: calc(103/ 1920 * 100vw);
 padding: 0px calc(16/ 1920 * 100vw);
	position: relative;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.nav__item dd a:hover {
	background: #79887A
}
.nav__item dd a {
	font-weight: normal;
 font-size: calc(18 / 1920 * 100vw);
	color: #fff;
 line-height: calc(50/ 1920 * 100vw);
	background: #2B312C;
 margin-bottom: calc(8/ 1920 * 100vw);
	display: block;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.nav__item.sli .h2tit a {
	background: url(../images/down.png) no-repeat right center;
 background-size: calc(8/ 1920 * 100vw);
 padding-right: calc(18 / 1920 * 100vw);
}
.nav__item:hover dl {
	visibility: visible;
	opacity: 1;
	z-index: 5;
 top: calc(103 / 1920 * 100vw);
}
.nav__item dl {
	color: #fff;
	position: absolute;
	width: 150%;
	left: -25%;
 top: calc(48 / 1920 * 100vw);
	text-align: center;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
 top: calc(88 / 1920 * 100vw);
	visibility: hidden;
	opacity: 0;
	z-index: -1;
}
.header__phone {
 font-size: calc(16 / 1920 * 100vw);
	color: #fff;
 margin-right: calc(80 / 1920 * 100vw);
	font-style: italic;
 padding-left: calc(30 / 1920 * 100vw);
	background: url(../images/tel.png) no-repeat 0px center;
 background-size: calc(18/ 1920 * 100vw);
}
/* ================= HERO ================= */

.hero {
	position: relative;
	height: 100vh;
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	width: 100%;
	height: 100%;
}
.hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__content {
	position: relative;
	z-index: 2;
	color: #fff;
 padding-left: calc(124/ 1920 * 100vw);
	position: absolute;
	top: 50%;
	left: 50%;
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.hero__title {
 font-size: calc(68/ 1920 * 100vw);
	font-weight: bold;
 margin-bottom: calc(16/ 1920 * 100vw);
}
.hero__desc {
 font-size: calc(24/ 1920 * 100vw);
 line-height: calc(34 / 1920 * 100vw);
 margin-bottom: calc(64/ 1920 * 100vw);
}
.hero__btns {
	display: flex;
 gap: calc(24/ 1920 * 100vw);
}
/* ================= BUTTON ================= */

.btn {
	display: inline-block;
 padding: calc(16 / 1920 * 100vw) calc(32 / 1920 * 100vw);
 font-size: calc(20 / 1920 * 100vw);
 border-radius: calc(6 / 1920 * 100vw);
	transition: all 0.3s;
	border: 1px solid #fff;
}
.btn--primary {
	background: rgba(255,255,255,0.2);
	color: #fff;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(2px);
	background-color: rgb(255 255 255 / 35%);
}
.btn--outline {
	border: 1px solid #fff;
	color: #fff;
}
.btn:hover {
	background: #fff;
	color: #000;
}
/* --- Renovation Section --- */
.renovation-section {
 padding: calc(180 / 1920 * 100vw) 0 calc(160/ 1920 * 100vw);
	background-color: #ffffff;
}
.renovation-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
 margin-left: calc(124/ 1920 * 100vw);
 margin-right: calc(76/ 1920 * 100vw);
}
/* --- Left Side: Overlapping Images --- */
.image-assets {
	position: relative;
 width: calc(489/ 1920 * 100vw);
 height: calc(600/ 1920 * 100vw);
}
.img-main {
 width: calc(418/ 1920 * 100vw);
 height: calc(563/ 1920 * 100vw);
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	/* Placeholder styling */
	background-color: #f0f0f0;
}
.picimg {
 width: calc(296 / 1920 * 100vw);
 height: calc(210 / 1920 * 100vw);
	object-fit: cover;
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 2;
}
.picimg:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background: #EFEFEF;
 left: calc(-21 / 1920 * 100vw);
 top: calc(-21 / 1920 * 100vw);
}
.img-sub {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 5;
	object-fit: cover;
}
/* --- Right Side: Content --- */
.content-side {
 width: calc(628/ 1920 * 100vw);
}
.main-heading {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(28/ 1920 * 100vw);
 line-height: calc(38 / 1920 * 100vw);
	color: #1a1a1a;
	text-transform: uppercase;
 margin-bottom: calc(16/ 1920 * 100vw);
 letter-spacing: calc(1 / 1920 * 100vw);
}
.tagline {
 font-size: calc(18 / 1920 * 100vw);
	color: #1A6840;
	text-transform: uppercase;
 margin-bottom: calc(100 / 1920 * 100vw);
	display: flex;
 gap: calc(10 / 1920 * 100vw);
	white-space: nowrap;
}
.trust-label {
 font-size: calc(20 / 1920 * 100vw);
	color: #1A6840;
	font-weight: 700;
	text-transform: uppercase;
 margin-bottom: calc(24/ 1920 * 100vw);
 letter-spacing: calc(1.5 / 1920 * 100vw);
}
/* --- Trust Indicators List --- */
.trust-list {
	display: flex;
	flex-direction: column;
 gap: calc(36 / 1920 * 100vw);
}
.trust-item {
	display: flex;
	align-items: center;
 gap: calc(20 / 1920 * 100vw);
}
.trust-icon {
 width: calc(35 / 1920 * 100vw);
 height: calc(35 / 1920 * 100vw);
	flex-shrink: 0;
}
.trust-icon img {
	object-fit: contain;
	width: 100%;
	height: 100%;
}
.trust-text {
 font-size: calc(19 / 1920 * 100vw);
	color: #2B312C;
	text-transform: uppercase;
	line-height: 1;
}
.trust-text strong {
	color: #125136;
	font-weight: 700;
}
/* --- Global Section Headings --- */
.section-title-serif {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(32/ 1920 * 100vw);
	color: #2B312C;
 letter-spacing: calc(1 / 1920 * 100vw);
	line-height: 1.2;
}
.section-tagline-green {
 font-size: calc(18/ 1920 * 100vw);
	color: #1A6840;
 margin-top: calc(12/ 1920 * 100vw);
}
/* --- Services Section --- */
.services-section {
 padding: calc(180 / 1920 * 100vw) 0;
	background-color: #A4ACA733; /* Light grey background from design */
 padding-bottom: calc(150 / 1920 * 100vw);
}
.services-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
 margin-bottom: calc(70 / 1920 * 100vw);
 padding-left: calc(124/ 1920 * 100vw);
}
.slider-controls {
	display: flex;
 gap: calc(15 / 1920 * 100vw);
	position: absolute;
 left: calc(124/ 1920 * 100vw);
 bottom: calc(20/ 1920 * 100vw);
}
.control-btn {
 width: calc(60 / 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
	border: none;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: #125136;
	transition: all 0.3s ease;
	position: static !important;
	margin: 0 !important;
}
.control-btn:hover {
	background: #125136;
	color: #fff;
}
.control-btn svg {
 width: calc(24 / 1920 * 100vw);
 height: calc(24 / 1920 * 100vw);
}
/* --- Service Cards --- */
.services-slider-container {
 padding-left: calc(361/ 1920 * 100vw); /* Align cards to the right of controls in design */
	position: relative;
}
.services-track .swiper-slide {
    /* display: flex; */
    padding: calc(20 / 1920 * 100vw) 0;
 	height: calc(460/ 1920 * 100vw);
	transition: padding 1s ease;
}
.services-track .swiper-slide:hover {
	padding: 0px;	
}
.service-card-item:hover .card-overlay-active ul {
	opacity: 1;
}
.service-card-item .card-overlay-active {
	background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
	background-position: left center;
	transition: all 2s ease;
}
.service-card-item:hover .card-overlay-active {
 	padding-top:calc(50 / 1920 * 100vw);
	background-image: linear-gradient(rgba(18, 81, 54, 0.65), rgba(18, 81, 54, 0.85));
	background-position: right center;
}
.service-card-item {
	position: relative;
	height: 100%;
	flex-shrink: 0;
	overflow: hidden;
}
.service-bg {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.card-overlay-default {
	position: absolute;
 bottom: calc(40 / 1920 * 100vw);
 left: calc(40 / 1920 * 100vw);
	color: #fff;
	z-index: 2;
}
.card-overlay-default h3 {
 font-size: calc(24 / 1920 * 100vw);
	font-weight: 700;
	line-height: 1.2;
}
/* Hover/Active State Overlay */
.card-overlay-active {
	position: absolute;
	inset: 0;
     /* Green Translucent */
    padding: calc(50 / 1920 * 100vw) calc(40 / 1920 * 100vw);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
    /* background-image: linear-gradient(rgba(18, 81, 54, 0.65), rgba(18, 81, 54, 0.85)); */
    padding-top: calc(298/ 1920 * 100vw);
	overflow: hidden;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.card-overlay-active h3 {
 	font-size: calc(30 / 1920 * 100vw);
	text-transform: uppercase;
}
.card-overlay-active ul {
height: calc(266/ 1920 * 100vw);
padding-top: calc(24 / 1920 * 100vw);
	opacity: 0;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.card-overlay-active li {
 font-size: calc(20 / 1920 * 100vw);
 margin-bottom: calc(8 / 1920 * 100vw);
	list-style: disc;
 margin-left: calc(20 / 1920 * 100vw);
	font-weight: 300;
}
.explore-btn {
	display: inline-block;
 padding: calc(15 / 1920 * 100vw) calc(32 / 1920 * 100vw);
	border: 1px solid #fff;
	color: #fff;
 font-size: calc(20 / 1920 * 100vw);
	width: fit-content;
	text-decoration: none;
	transition: background 0.3s;
	border-radius: 8px;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(2px);
	background-color: rgb(255 255 255 / 35%);
}
.slider-controls {
	display: flex;
 gap: calc(15 / 768 * 100vw);
	position: absolute;
 left: calc(4 / 768 * 100vw);
 bottom: calc(20 / 768 * 100vw);
}
.explore-btn:hover {
	background: #fff;
	color: #125136;
}
/* --- Why Choose Section --- */
.why-choose-section {
 padding: calc(200/ 1920 * 100vw) 0 calc(140/ 1920 * 100vw);
	background-color: #A4ACA733;
}
.why-choose-wrapper {
	/* display: flex; */
	justify-content: space-between;
	position: relative;
	zoom: 1;
	overflow: hidden;
}
.why-choose-header {
 width: calc(550 / 1920 * 100vw);
 margin-left: calc(124/ 1920 * 100vw);
 padding-top: calc(84/ 1920 * 100vw);
	position: absolute;
	left: 0;
	top: 0;
}
.feature-grid {
	display: grid;
 grid-template-columns: repeat(3, calc(260 / 1920 * 100vw));
 gap: calc(50/ 1920 * 100vw);
	float: right;
}
.feature-card {
	background: #fff;
 padding: 0px calc(30/ 1920 * 100vw);
 border-radius: calc(15 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	justify-content: center;
 height: calc(260 / 1920 * 100vw);
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(30 / 1920 * 100vw) rgba(0,0,0,0.03);
	color: #1A6840;
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: center;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.feature-card.highlight, .feature-card:hover {
	background: #125136;
	color: #fff;
}
.feature-card.offset-card {
/* grid-column: 1 / 2; */
    /* margin-top: calc(-140 / 1920 * 100vw); */ /* Creative layout shift */
}
.feature-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	position: absolute;
	left: 0;
	top: 0;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.feature-icon img.default {
	top: 0;
	opacity: 1;
}
.feature-icon img.current {
	top: 100%;
	opacity: 0;
}
.feature-card:hover .feature-icon img.default {
	opacity: 0;
	top: -100%;
}
.feature-card:hover .feature-icon img.current {
	opacity: 1;
	top: 0px;
}
.feature-icon, .feature-icon-green {
 width: calc(60 / 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
 margin-bottom: calc(20 / 1920 * 100vw);
	overflow: hidden;
	position: relative;
}
.feature-card p {
 font-size: calc(18 / 1920 * 100vw);
	line-height: 1.7;
}
.feature-card.first {
	background: none;
	box-shadow: none;
}
/* --- Projects Section Styles --- */
.projects-section {
 padding: calc(194/ 1920 * 100vw) 0;
	background-color: #ffffff;
}
.projects-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
 margin-bottom: calc(65 / 1920 * 100vw);
 padding: 0px calc(124/ 1920 * 100vw);
}
/* --- View Project Button --- */
.view-all-btn {
	background-color: #1A6840;
	color: #ffffff;
	text-decoration: none;
 font-size: calc(20 / 1920 * 100vw);
 padding: calc(16 / 1920 * 100vw) calc(32/ 1920 * 100vw);
 border-radius: calc(8 / 1920 * 100vw);
	display: flex;
	align-items: center;
 gap: calc(10 / 1920 * 100vw);
	transition: background-color 0.3s ease, transform 0.2s ease;
}
.view-all-btn:hover {
	background-color: #0e3d29;
 transform: translateY(calc(-2 / 1920 * 100vw));
}
.arrow-icon {
 font-size: calc(22 / 1920 * 100vw);
}
/* --- Projects Grid --- */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(30 / 1920 * 100vw);
 padding: 0px calc(124/ 1920 * 100vw);
	display: flex;
}
.project-card {
	background-color: #EDEEED; /* Light grey info area from design */
	overflow: hidden;
	transition: transform 0.3s ease;
	/* display: flex; */
	flex: 1;
	cursor: pointer;
 padding: calc(10/ 1920 * 100vw);
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.project-card:hover, .project-card.current {
	flex: 2
}
.project-card:hover {
}
.project-image {
	width: 100%;
 height: calc(234 / 1920 * 100vw);
	background-color: #ddd;
	overflow: hidden;
	position: relative;
}
.project-card:hover img, .project-card.current img {
	width: 50%;
}
.project-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.project-image img.img-left {
	position: relative;
	z-index: 4;
}
.project-card:hover img.img-right, .project-card.current img.img-right {
	left: 50%;
}
.project-image img.img-right {
	position: absolute;
	left: 0;
	top: 0;
}
/* Special Case: Dual Image Card */
.project-image.dual {
	display: flex;
}
.project-image.dual img {
	width: 50%;
}
.project-image.dual .img-left {
 border-right: calc(1 / 1920 * 100vw) solid #ffffff; /* Subtle separation if needed */
}
/* --- Project Info Area --- */
.project-info {
 padding: calc(40/ 1920 * 100vw) calc(0 / 1920 * 100vw) calc(10/ 1920 * 100vw);
}
.project-info h3 {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1a1a1a;
 margin-bottom: calc(4/ 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.project-info p {
 font-size: calc(16 / 1920 * 100vw);
	color: #666666;
	font-weight: 500;
	text-transform: uppercase;
}
/* --- Testimonials Section Styles --- */
.testimonials-section > * {
	position: relative;
	z-index: 4
}
.testimonials-section:after {
	content: "";
	background-color: #f4f4f4; /* Light grey consistent with previous sections */
	width: 100%;
	height: 82%;
	position: absolute;
	left: 0;
	top: 0px;
}
.testimonials-section {
 padding: calc(180 / 1920 * 100vw) 0 0;
	padding-bottom: 0;
	position: relative;
}
.section-title-serif.centered {
	text-align: center;
 margin-bottom: calc(12/ 1920 * 100vw);
 font-size: calc(32/ 1920 * 100vw);
	color: #2B312C;
}
.testimonial-wrapper .swiper-slide {
	align-items: center;
 padding-top: calc(109/ 1920 * 100vw);
}
.testimonial-wrapper {
	position: relative;
 margin: 0px calc(220 / 1920 * 100vw);
    /* top: calc(20 / 1920 * 100vw); */
    padding-top: calc(70/ 1920 * 100vw);
}
/* --- Left Media --- */
.testimonial-media {
 width: calc(340/ 1920 * 100vw);
	position: relative;
	z-index: 5;
	position: absolute;
	left: 0;
	top: 0;
}
.main-img-box {
	width: 100%;
 height: calc(458/ 1920 * 100vw);
	position: relative;
}
.client-project-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.testimonial-nav {
	position: absolute;
 top: calc(402/ 1920 * 100vw);
 left: calc(284/ 1920 * 100vw); /* Overlapping the card area */
	display: flex;
	background: #ffffff;
	z-index: 10;
	z-index: 555;
}
.nav-btn {
 width: calc(56/ 1920 * 100vw);
 height: calc(56/ 1920 * 100vw);
	border: none;
	background: #ffffff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #125136;
	transition: background 0.3s;
	margin: 0px !important;
	position: static;
}
.nav-btn:hover {
	background: #f9f9f9;
}
.nav-btn svg {
 width: calc(24 / 1920 * 100vw);
}
/* --- Right Content Card --- */
.testimonial-card {
 width: calc(648/ 1920 * 100vw);
	/* The Pixel-Perfect Overlap */
	background: #ffffff;
	position: relative;
	z-index: 2;
	overflow: hidden;
	display: flex;
 left: calc(312/ 1920 * 100vw);
 padding-top: calc(80/ 1920 * 100vw);
 padding-left: calc(162/ 1920 * 100vw);
 padding-right: calc(40/ 1920 * 100vw);
	display: block;
 padding-bottom: calc(60/ 1920 * 100vw);
}
.card-texture {
	position: absolute;
	inset: 0;
	opacity: 0.4; /* Subtle texture effect */
	background-size: cover;
	pointer-events: none;
	width: 100%;
	height: 100%;
	opacity: .04;
}
.card-content {
	z-index: 3;
}
.quote-icon {
	position: absolute;
width: calc(74/ 1920 * 100vw);
height: calc(72 / 1920 * 100vw);
left: calc(58/ 1920 * 100vw);
top: calc(40/ 1920 * 100vw);
	background: url(../images/yh.png) no-repeat center center;
	background-size: 78%;
}
.testimonial-text {
 font-size: calc(18/ 1920 * 100vw);
	line-height: 1.6;
	color: #849188;
 margin-bottom: calc(29/ 1920 * 100vw);
	font-weight: 500;
}
.testimonial-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}
.author-name {
 font-size: calc(18/ 1920 * 100vw);
	font-weight: 700;
	color: #2B312C;
 margin-bottom: calc(4/ 1920 * 100vw);
}
.star-rating {
	color: #125136;
 font-size: calc(24 / 1920 * 100vw);
 letter-spacing: calc(5 / 1920 * 100vw);
}
/* --- Slider Dots --- */
.slider-dots {
	display: flex;
	position: static;
	position: absolute;
	right: 0;
 bottom: calc(68/ 1920 * 100vw);
 right: calc(74/ 1920 * 100vw);
}
.slider-dots * {
	border-radius: 0px;
 width: calc(20 / 1920 * 100vw);
 height: calc(4 / 1920 * 100vw);
	background-color: #BCBCBC;
	transition: background 0.3s;
	margin-left: 8px;
	opacity: 1;
}
.slider-dots *.swiper-pagination-bullet-active {
	background-color: #1A6840;
 width: calc(40 / 1920 * 100vw);
}
/* --- Partners Section Styles --- */
.partners-section {
 padding: calc(115/ 1920 * 100vw) 0;
	background-color: #ffffff;
	text-align: center;
	padding-bottom: 0;
}
.proud-member-title {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(32 / 1920 * 100vw);
	color: #1a1a1a;
 letter-spacing: calc(2 / 1920 * 100vw);
 margin-bottom: calc(30 / 1920 * 100vw);
	font-weight: 700;
}
/* --- Divider "OF" --- */
.divider-container {
	display: flex;
	align-items: center;
	justify-content: center;
 gap: calc(25 / 1920 * 100vw);
 margin-bottom: calc(90 / 1920 * 100vw);
}
.horizontal-line {
	flex-grow: 1;
	height: 1px;
	background-color: #e5e5e5;
}
.divider-text {
 font-size: calc(24/ 1920 * 100vw);
	color: #1a1a1a;
	font-weight: 600;
 letter-spacing: calc(1 / 1920 * 100vw);
	/*font-family: 'Playfair Display', serif;*/
}
/* --- Logos Grid --- */
.partners-logo-grid {
	display: flex;
	justify-content: space-around;
	align-items: center;
 padding-bottom: calc(100 / 1920 * 100vw);
}
.logo-item {
 width: calc(300 / 1920 * 100vw); /* Fixed width for alignment */
	display: flex;
	justify-content: center;
	align-items: center;
}
.partner-img {
	max-width: 100%;
	height: auto;
 max-height: calc(101/ 1920 * 100vw); /* Ensure logos are visually same height */
	object-fit: contain;
	filter: grayscale(0); /* Keep brand colors as in design */
	transition: transform 0.3s ease;
}
.partner-img:hover {
	transform: scale(1.05);
}
.bottom-divider {
	width: 100%;
	height: 1px;
	background-color: #e5e5e5;
}
/* --- Contact Section Styles --- */
.contact-section {
 padding: calc(120 / 1920 * 100vw) 0 0;
	background-color: #ffffff;
	overflow: hidden;
}
.contact-flex {
	justify-content: space-between;
	align-items: center;
	position: relative;
	text-align: right;
}
.contact-content {
 width: calc(525 / 1920 * 100vw);
	position: relative;
	z-index: 2;
	position: absolute;
	left: 0;
	top: 0;
	text-align: left;
 left: calc(123/ 1920 * 100vw);
 top: calc(127/ 1920 * 100vw);
}
.contact-taglines {
 margin: calc(20 / 1920 * 100vw) 0 calc(32/ 1920 * 100vw);
}
.tagline-primary {
 font-size: calc(20 / 1920 * 100vw);
	color: #125136;
 margin-bottom: calc(10 / 1920 * 100vw);
}
.tagline-secondary {
 font-size: calc(18 / 1920 * 100vw);
	color: #125136;
	font-weight: 700;
}
.contact-divider:after {
	content: "";
	position: absolute;
	background: #1A6840;
 width: calc(64 / 1920 * 100vw);
	height: 2px;
	left: 0px;
	top: -1px;
}
.contact-divider {
	width: 100%;
	height: 1px;
	background-color: #ddd;
	position: relative;
}
/* Contact List */
.contact-info-list {
	list-style: none;
 padding-bottom: calc(28/ 1920 * 100vw);
 padding-top:  calc(32/ 1920 * 100vw);
}
.contact-info-list li:hover {
	color: #1A6840
}
.contact-info-list li {
	display: flex;
	align-items: center;
 font-size: calc(24 / 1920 * 100vw);
	color: #2B312C;
 margin-bottom: calc(32/ 1920 * 100vw);
 gap: calc(11/ 1920 * 100vw);
	cursor: pointer;
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.info-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain
}
.info-icon {
 width: calc(28 / 1920 * 100vw);
 height: calc(28 / 1920 * 100vw);
	color: #125136;
	flex-shrink: 0;
	display: flex;
}
/* Buttons */
.contact-actions {
	display: flex;
 gap: calc(24 / 1920 * 100vw);
}
.cta-btn.green-solid {
	background-color: #1A6840;
	color: #ffffff;
 padding: calc(16/ 1920 * 100vw) calc(32/ 1920 * 100vw);
 font-size: calc(20 / 1920 * 100vw);
	text-decoration: none;
 border-radius: calc(8 / 1920 * 100vw);
	transition: all 0.3s ease;
}
.cta-btn.green-solid:hover {
	background-color: #0d3b27;
 transform: translateY(calc(-3 / 1920 * 100vw));
}
/* Map Styling */
.contact-map-wrapper {
 width: calc(1218/ 1920 * 100vw);
	height: auto;
	position: relative;
	/* Slightly bleed out for design effect */
	display: inline-block;
}
.map-bg-container {
	width: 100%;
	height: 100%;
	position: relative;
}
.map-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Soft fade to white as per design */
	mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
	-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
.map-pin {
	position: absolute;
	top: 48%;
	left: 64%;
	z-index: 5;
}
.pin-icon img {
 width: calc(76/ 1920 * 100vw);
	position: relative;
	z-index: 2;
}
.pin-pulse {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
 width: calc(40 / 1920 * 100vw);
 height: calc(40 / 1920 * 100vw);
	background-color: rgba(18, 81, 54, 0.4);
	border-radius: 50%;
	z-index: 1;
	animation: pinPulse 2s infinite;
}
 @keyframes pinPulse {
 0% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
 100% {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
/* --- Footer Styles --- */
.main-footer {
	background-color: #1A6840;
 padding: calc(32/ 1920 * 100vw) 0;
	color: #ffffff;
}
.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
 padding: 0px calc(64/ 1920 * 100vw);
}
.copyright {
 font-size: calc(18 / 1920 * 100vw);
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.social-links {
	display: flex;
 gap: calc(24/ 1920 * 100vw);
}
.social-item {
 width: calc(40 / 1920 * 100vw);
 height: calc(40 / 1920 * 100vw);
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
 border-radius: calc(4 / 1920 * 100vw);
	transition: transform 0.3s ease;
}
.social-item img {
	width: 100%;
}
.social-item:hover {
 transform: translateY(calc(-5 / 1920 * 100vw));
}
/* --- About Us Section Styles --- */
.about-section {
 padding: calc(257/ 1920 * 100vw) 0 calc(144/ 1920 * 100vw);
	background-color: #A4ACA733; /* Light grey background */
	position: relative;
	overflow: hidden;
}
/* Vertical Marble Strip on the right */
.about-marble-strip {
	position: absolute;
	top: 0;
	right: 0;
 width: calc(352/ 1920 * 100vw);
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0.6;
	z-index: 1;
}
.about-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	position: relative;
	z-index: 2;
 padding: 0px calc(170/ 1920 * 100vw);
 padding-left: calc(163/ 1920 * 100vw);
}
/* Left Content */
.about-content {
 width: calc(520/ 1920 * 100vw);
 padding-top: calc(40 / 1920 * 100vw);
}
.about-arrow-container {
	display: flex;
	align-items: center;
 margin: calc(10 / 1920 * 100vw) 0 calc(40 / 1920 * 100vw) 0;
}
.about-line {
 width: calc(161/ 1920 * 100vw);
 height: calc(2 / 1920 * 100vw);
	background-color: #1A6840;
}
.about-arrow-head {
	color: #1A6840;
 font-size: calc(24 / 1920 * 100vw);
 margin-left: calc(-5 / 1920 * 100vw);
	line-height: 1;
}
.about-text-group {
	display: flex;
	flex-direction: column;
 gap: calc(80 / 1920 * 100vw);
}
.about-desc-green {
 font-size: calc(20 / 1920 * 100vw);
	line-height: 1.6;
	color: #1A6840;
	font-weight: 500;
}
/* Right Gallery (Mosaic) */
.about-gallery {
	display: flex;
 gap: calc(24 / 1920 * 100vw);
	align-items: flex-start;
}
.gallery-column.right-col {
	display: flex;
	align-items: flex-start; /* 顶部对齐 */
	width: 100%;
	align-items: flex-end; /* 如果两个图片宽度不同，确保它们都右对齐 */
}
.gallery-column.left-col {
 padding-top: calc(55 / 1920 * 100vw);
}
.gallery-column {
	display: flex;
	flex-direction: column;
 gap: calc(25 / 1920 * 100vw);
	text-align: right;
	display: flex;
}
.about-img {
	object-fit: cover;
 border-radius: calc(8 / 1920 * 100vw);
}
/* Specific Sizes based on Design Grid */
.img-sm-top {
 width: calc(202/ 1920 * 100vw);
}
.img-xs-bottom {
 width: calc(133/ 1920 * 100vw);
	align-self: flex-end; /* Staggered effect */
 left: calc(36 / 1920 * 100vw);
	position: relative;
}
.img-lg-top {
 width: calc(256/ 1920 * 100vw);
/* float: right; */
}
.img-md-bottom {
 width: calc(220/ 1920 * 100vw);
}
/* --- Service Hero Section Styles --- */
.service-hero {
 padding-top: calc(247/ 1920 * 100vw);
	position: relative;
	width: 100%;
	display: flex;
	align-items: center;
	overflow: hidden;
 padding-bottom: calc(206/ 1920 * 100vw);
	background-color: #ffffff;
}
/* Background & Gradient Mask */
.hero-bg-wrapper {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.hero-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}
.hero-overlay-gradient {
	position: absolute;
	inset: 0;
	/* White to transparent gradient from left to right */
	background: linear-gradient(to right,  rgba(255, 255, 255, 1) 0%,  rgba(255, 255, 255, 0.95) 20%,  rgba(255, 255, 255, 0.5) 70%,  rgba(255, 255, 255, 0) 100%  );
}
/* Text Content Container */
.hero-content-flex {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
}
.hero-text-box {
 margin-left: calc(124/ 1920 * 100vw);
 margin-right: calc(124/ 1920 * 100vw);
 width: calc(800/ 1920 * 100vw);
}
.hero-main-title span {
 font-size: calc(28/ 1920 * 100vw);
	font-family: inherit;
}
.hero-main-title {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(36/ 1920 * 100vw);
	line-height: 1.2;
	color: #1a1a1a;
	font-weight: 700;
 margin-bottom: calc(30 / 1920 * 100vw);
 letter-spacing: calc(-1 / 1920 * 100vw);
}
.hero-sub-black {
 font-size: calc(20 / 1920 * 100vw);
	color: #1a1a1a;
	font-weight: 700;
 margin-bottom: calc(16 / 1920 * 100vw);
}
.hero-sub-green-bold {
 font-size: calc(18 / 1920 * 100vw);
	color: #1A6840;
	font-weight: 700;
 margin-bottom: calc(16 / 1920 * 100vw);
	text-transform: uppercase;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.hero-description {
 font-size: calc(16 / 1920 * 100vw);
	line-height: 1.7;
	color: #1A6840;
	font-weight: 500;
 width: calc(850 / 1920 * 100vw);
 margin-bottom: calc(60 / 1920 * 100vw);
	text-transform: uppercase;
}
/* Rating Info */
.hero-rating {
	display: flex;
	align-items: center;
 gap: calc(15 / 1920 * 100vw);
 margin-bottom: calc(16 / 1920 * 100vw);
}
.star-icon {
 font-size: calc(22 / 1920 * 100vw);
}
.rating-text {
 font-size: calc(18 / 1920 * 100vw);
	color: #1A6840;
}
/* Button Group */
.hero-cta-group {
	display: flex;
 gap: calc(24 / 1920 * 100vw);
}
.btn-primary-green {
	background-color: #1A6840;
	color: #ffffff;
	text-decoration: none;
 font-size: calc(20 / 1920 * 100vw);
    /* font-weight: 700; */
    padding: calc(16/ 1920 * 100vw) calc(32/ 1920 * 100vw);
 border-radius: calc(8 / 1920 * 100vw);
	transition: all 0.3s ease;
	display: inline-block;
}
.btn-primary-green:hover {
	background-color: #0d3b27;
 transform: translateY(calc(-3 / 1920 * 100vw));
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw) rgba(18, 81, 54, 0.2);
}
/* --- Professional Installation Styles --- */
.pro-install-section {
 padding: calc(220/ 1920 * 100vw) 0;
	background-color: #ffffff;
}
.install-wrapper {
	display: flex;
	align-items: center;
	position: relative;
 padding: 0px calc(124/ 1920 * 100vw);
}
/* Left Content Box */
.install-content-box {
	background-color: #EDEEED; /* Light grey box from design */
 width: calc(691/ 1920 * 100vw);
 padding: calc(40 / 1920 * 100vw) calc(60/ 1920 * 100vw) calc(100 / 1920 * 100vw) calc(60 / 1920 * 100vw);
	position: relative;
	z-index: 1;
}
.install-content-box .section-title-serif {
 font-size: calc(27 / 1920 * 100vw);
	line-height: 1.4;
 margin-bottom: calc(16/ 1920 * 100vw);
	color: #2B312C;
}
.install-text-group {
	display: flex;
	flex-direction: column;
 gap: calc(31/ 1920 * 100vw);
}
.install-desc-green {
 font-size: calc(16 / 1920 * 100vw);
	line-height: 2;
	color: #1A6840;
	font-weight: 500;
}
/* Right Image Area */
.install-image-area {
 width: calc(537/ 1920 * 100vw);
 margin-left: calc(-60/ 1920 * 100vw); /* Overlap effect */
	position: relative;
	z-index: 2;
}
/* The dark grey/green block behind top-right */
.image-deco-bg {
	position: absolute;
 top: calc(-20 / 1920 * 100vw);
 right: calc(-20 / 1920 * 100vw);
	width: 100%;
	height: 100%;
	background-color: #A4ACA7; /* Decorative grey-green block */
	z-index: -1;
}
.install-img-container {
	width: 100%;
 height: calc(336/ 1920 * 100vw);
	overflow: hidden;
}
.install-main-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.services-tab-section .container {
 padding: 0 calc(124/ 1920 * 100vw);
}
/* --- Services Tab Section Styles --- */
.services-tab-section {
 padding: calc(120 / 1920 * 100vw) 0 calc(160 / 1920 * 100vw);
	background-color: #ffffff;
}
/* Tab Navigation */
.tab-nav-wrapper {
	position: relative;
 margin-bottom: calc(60 / 1920 * 100vw);
/* padding: 0px calc(124/ 1920 * 100vw); */
}
.tab-headers {
	display: flex;
	justify-content: space-between;
	list-style: none;/* padding: 0 calc(60 / 1920 * 100vw); */
}
.tab-header {
 font-size: calc(22/ 1920 * 100vw);
 padding-top: calc(16/ 1920 * 100vw);
 height: calc(65/ 1920 * 100vw);
	font-weight: 500;
	color: #2B312C;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
	text-align: center;
	flex: 1;
}
/* Base line under the whole nav */
.tab-underline-base {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
 height: calc(2 / 1920 * 100vw);
	background-color: #eeeeee;
	z-index: 1;
}
/* Active tab state */
.tab-header.active {
	font-weight: 700;
	color: #1a1a1a;
}
.tab-header.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
 height: calc(4 / 1920 * 100vw);
	background-color: #1A6840;
	z-index: 2;
}
/* Tab Panels Content */
.tab-panel {
	display: none; /* Hidden by default */
}
.tab-panel.active {
	display: block;
	animation: fadeIn 0.5s ease;
}
 @keyframes fadeIn {
 from {
opacity: 0;
transform: translateY(10px);
}
to {
	opacity: 1;
	transform: translateY(0);
}
}
/* Service Row List */
.service-item-list {
	display: flex;
	flex-direction: column;
 gap: calc(24/ 1920 * 100vw);
}
.service-row-item {
	background-color: #EDEEED;
 padding: calc(20 / 1920 * 100vw) calc(30 / 1920 * 100vw);
	display: flex;
	align-items: center;
 gap: calc(20 / 1920 * 100vw);
	transition: background-color 0.3s ease;
}
.service-row-item:hover {
	background-color: #e9e9e9;
}
.service-icon-box {
 width: calc(36/ 1920 * 100vw);
 height: calc(36/ 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
}
.service-tab-icon {
	width: 100%;
	height: auto;
}
.service-row-text {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1A6840;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* --- Projects Section V2 Styles --- */
.projects-section-v2 {
 padding: calc(204/ 1920 * 100vw) 0;
	background-color: #ffffff;
}
.projects-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
 margin-bottom: calc(70 / 1920 * 100vw);
}
/* --- View Project Button (Shared Style) --- */
.view-all-btn {
	background-color: #1A6840;
	color: #ffffff;
	text-decoration: none;
 font-size: calc(16 / 1920 * 100vw);
 padding: calc(16/ 1920 * 100vw) calc(32 / 1920 * 100vw);
 border-radius: calc(10 / 1920 * 100vw);
	display: flex;
	align-items: center;
 gap: calc(15 / 1920 * 100vw);
	transition: all 0.3s ease;
}
.view-all-btn:hover {
	background-color: #0d3b27;
 transform: translateY(calc(-3 / 1920 * 100vw));
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(20 / 1920 * 100vw) rgba(0,0,0,0.1);
}
.type2 .project-card {
	flex: 1 !important;
}
.type2 .project-card:hover img, .type2 .project-card.current img {
	width: 100%;
}
.type2 .projects-section {
 padding: calc(204 / 1920 * 100vw) 0;
}
/* --- FAQ Section Styles --- */
.faq-section {
 padding: calc(140 / 1920 * 100vw) 0;
	background-color: #ffffff;
}
.faq-list {
 max-width: calc(776/ 1920 * 100vw);
	/* margin: calc(100 / 1920 * 100vw) auto 0; */
	display: flex;
	flex-direction: column;
 gap: calc(60 / 1920 * 100vw);
	margin: auto;
}
.faq-item {
	display: flex;
	flex-direction: column;
 gap: calc(10/ 1920 * 100vw);
}
/* Question Styling - Left Aligned */
.faq-question {
	display: flex;
	align-items: center;
 gap: calc(10 / 1920 * 100vw);
	align-self: flex-start;
}
.faq-icon-box img {
	width: 100%;
}
.faq-icon-box {
 width: calc(30 / 1920 * 100vw);
 height: calc(30 / 1920 * 100vw);
	color: #125136;
	flex-shrink: 0;
}
.question-text {
 font-size: calc(20 / 1920 * 100vw);
	color: #1A6840;
 letter-spacing: calc(0.5 / 1920 * 100vw);
	font-weight: bold;
}
/* Answer Styling - Right Aligned & Offset */
.faq-answer {
	display: flex;
	align-items: center;
 gap: calc(18 / 1920 * 100vw);
	align-self: flex-end;/* margin-right: calc(50 / 1920 * 100vw); */ /* Slightly offset from absolute edge */
}
.answer-text {
 font-size: calc(20 / 1920 * 100vw);
	color: #2B312C;
 letter-spacing: calc(0.3 / 1920 * 100vw);
}
.faq-icon-box.small {
 width: calc(30 / 1920 * 100vw);
 height: calc(30 / 1920 * 100vw);
	color: #333;
}
/* --- CTA Upgrade Section Styles --- */
.cta-upgrade-section {
	position: relative;
 padding: calc(160 / 1920 * 100vw) 0;
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
}
/* Background & Mask */
.cta-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.cta-bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cta-mask {
	position: absolute;
	inset: 0;
	/* Dark tint to make white text pop */
	background: #5c5f5dc2;
}
/* Content Area */
.cta-content {
	position: relative;
	z-index: 5;
	color: #ffffff;
 padding: 0px calc(188/ 1920 * 100vw);
}
.white-text {
	color: #ffffff !important;
 font-size: calc(32/ 1920 * 100vw);
	line-height: 1;
 margin-bottom: calc(20 / 1920 * 100vw);
/* max-width: calc(1200 / 1920 * 100vw); */
}
.cta-subtext {
 font-size: calc(20 / 1920 * 100vw);
 margin-bottom: calc(60 / 1920 * 100vw);
	font-weight: 400;
	opacity: 0.95;
}
/* Rating Info */
.cta-rating {
	display: flex;
	align-items: center;
 gap: calc(7 / 1920 * 100vw);
 margin-bottom: calc(45 / 1920 * 100vw);
}
.cta-rating .star-icon {
 font-size: calc(24 / 1920 * 100vw);
}
.cta-rating .rating-text {
 font-size: calc(18/ 1920 * 100vw);
	font-weight: 600;
	color: #fff;
	font-weight: normal;
}
/* Ghost Buttons */
.cta-button-group {
	display: flex;
 gap: calc(25 / 1920 * 100vw);
}
.btn-ghost {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	text-decoration: none;
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
 padding: calc(20 / 1920 * 100vw) calc(55 / 1920 * 100vw);
 border: calc(2 / 1920 * 100vw) solid #ffffff;
 border-radius: calc(12 / 1920 * 100vw);
	transition: all 0.3s ease;
	backdrop-filter: blur(5px); /* Modern touch for glassmorphism */
}
.btn-ghost:hover {
	background-color: #ffffff;
	color: #125136;
 transform: translateY(calc(-5 / 1920 * 100vw));
 box-shadow: 0 calc(15 / 1920 * 100vw) calc(30 / 1920 * 100vw) rgba(0, 0, 0, 0.2);
}
/* --- Additional Services Grid Styles --- */
.additional-services-section {
 padding: calc(100 / 1920 * 100vw) 0;
	background-color: #ffffff;
}
.services-grid-container {
	display: grid;
	/* Two equal columns */
	grid-template-columns: repeat(2, 1fr);
    /* Pixel-perfect spacing from design */
    gap: calc(40 / 1920 * 100vw);
}
.service-box {
	background-color: #f2f2f2; /* Light grey base */
 padding: calc(20/ 1920 * 100vw);
	display: flex;
	align-items: center;
 gap: calc(10 / 1920 * 100vw);
	transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	cursor: pointer;
}
/* Hover state interaction */
.service-box:hover {
}
.service-icon-wrap img {
	width: 100%;
}
.service-icon-wrap {
 width: calc(36/ 1920 * 100vw);
 height: calc(36/ 1920 * 100vw);
	color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.service-label {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1A6840; /* Brand Green */
 letter-spacing: calc(0.5 / 1920 * 100vw);
	text-transform: uppercase;
}
/* Special Case: Last item spans 2 columns */
.service-box.full-width {
	grid-column: 1 / span 2;
}
/* --- Projects Showcase Styles --- */
.projects-showcase-section {
 padding: calc(207/ 1920 * 100vw) 0 calc(156/ 1920 * 100vw);
	background-color: #f4f4f4; /* Grayish background from image */
}
.showcase-header {
 margin-bottom: calc(100 / 1920 * 100vw);
}
.showcase-header .section-tagline-green {
 margin-top: calc(25 / 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
 letter-spacing: calc(1 / 1920 * 100vw);
	text-align: center;
	color: #1A6840;
}
/* Showcase Grid */
.showcase-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(25 / 1920 * 100vw);
 padding: 0px calc(80/ 1920 * 100vw);
}
.showcase-card {
	position: relative;
 height: calc(231/ 1920 * 100vw);
	overflow: hidden;
	background-color: #ddd;
	cursor: pointer;
}
.showcase-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.showcase-card:hover .showcase-img {
	transform: scale(1.1);
}
/* Middle Card Overlay Styles */
.card-bottom-overlay {
	position: absolute;
 bottom: calc(-60/ 1920 * 100vw);
	left: 0;
	width: 100%;
 height: calc(60/ 1920 * 100vw);
	background: #2B312CCC; /* Dark semi-transparent green-black */
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: all 0.3s ease;
}
.showcase-card.has-overlay:hover .card-bottom-overlay {
	bottom: 0px;
}
.location-text {
	/*font-family: 'Playfair Display', serif;*/
	color: #ffffff;
 font-size: calc(18/ 1920 * 100vw);
 letter-spacing: calc(2 / 1920 * 100vw);
	font-weight: 400;
}
/* --- Project Gallery Styles --- */
.project-gallery-section {
 padding: calc(207/ 1920 * 100vw) 0 calc(100/ 1920 * 100vw);
	background-color: #f6f6f6; /* Neutral background */
}
.gallery-header {
	display: flex;
	align-items: center;
 gap: calc(24/ 1920 * 100vw);
 margin-bottom: calc(70 / 1920 * 100vw);
 padding: 0px calc(80/ 1920 * 100vw);
}
.back-nav-btn {
 width: calc(56/ 1920 * 100vw);
 height: calc(56/ 1920 * 100vw);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #125136;
	text-decoration: none;
	transition: all 0.3s ease;
 box-shadow: 0 calc(2 / 1920 * 100vw) calc(10 / 1920 * 100vw) rgba(0,0,0,0.05);
}
.back-nav-btn:hover {
	background-color: #125136;
	color: #ffffff;
}
.back-nav-btn svg {
 width: calc(24 / 1920 * 100vw);
}
.gallery-title-serif {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(48 / 1920 * 100vw);
	color: #1a1a1a;
	font-weight: 700;
}
/* Grid Layout */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 gap: calc(25 / 1920 * 100vw);
 padding: 0px calc(80/ 1920 * 100vw);
}
.gallery-item {
	position: relative;
 height: calc(231/ 1920 * 100vw);
	background-color: #e0e0e0;
	overflow: hidden;
	cursor: pointer;
}
.gallery-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}
/* Hover Overlay */
.gallery-hover-overlay {
	position: absolute;
	inset: 0;
	background: #8A988ECC url(../images/sear.png) no-repeat center center; /* Brand green with opacity */
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 5;
 background-size: calc(25/ 1920 * 100vw);
}
.gallery-hover-overlay.active, .gallery-item:hover .gallery-hover-overlay {
	opacity: 1;
}
.gallery-item:hover .gallery-img {
	transform: scale(1.08);
}
.zoom-icon {
 font-size: calc(40 / 1920 * 100vw);
	color: #ffffff;
}
/* Load More Button */
.load-more-wrapper {
	display: flex;
	justify-content: center;
 margin-top: calc(36/ 1920 * 100vw);
}
.btn-load-more img {
 width: calc(15/ 1920 * 100vw);
}
.btn-load-more {
	background-color: #ffffff;
	border: none;
	color: #1A6840;
 font-size: calc(20/ 1920 * 100vw);
	font-weight: 700;
 padding: calc(16/ 1920 * 100vw) calc(32/ 1920 * 100vw);
 border-radius: calc(8 / 1920 * 100vw);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
 gap: calc(15/ 1920 * 100vw);
}
.btn-load-more:hover {
 transform: translateY(calc(-3 / 1920 * 100vw));
}
.alertModel {
	display: none;
	position: fixed;
	background: #000000CC;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 77777;
}
.alertModel .close {
	position: absolute;
	right: 0;
	top: 0;
	cursor: pointer;
	z-index: 5;
 top: calc(40/1920*100vw);
 right: calc(40/1920*100vw);
 width: calc(24/1920*100vw);
 height: calc(24/1920*100vw);
	background: url(../images/close.png) no-repeat center center;
 background-size: calc(14/1920*100vw);
}
.alertModel .swiper-slide {
	display: -webkit-box;
	display: -moz-box;
	display: -webkit-flex;
	display: -moz-flex;
	display: -ms-flexbox;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100vh;
}
.alertModel .swiper-slide img {
	display: block;
	margin: auto;
	width: 60%;
	height: 63vh;
	object-fit: contain;
}
.alertModel .swiper-pagination {
	color: #fff;
	bottom: 6vh;
}
.alertModel .swiper-button-next {
 width: calc(64/1920*100vw);
 height: calc(64/1920*100vw);
 right: calc(80/1920*100vw);
 margin-top: calc(-40/1920*100vw);
	background: url(../images/right.png) no-repeat center center;
	background-size: 100%;
}
.alertModel .swiper-button-prev {
 width: calc(64/1920*100vw);
 height: calc(64/1920*100vw);
 left: calc(80/1920*100vw);
 margin-top: calc(-40/1920*100vw);
	background: url(../images/left.png) no-repeat center center;
	background-size: 100%;
}
/* --- Contact Hero Section Styles --- */
.contact-page-hero {
	position: relative;
	width: 100%;
	/* Standard hero height for contact page */
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
/* Background Image & Masking */
.hero-bg-box {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hero-full-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero-dark-mask {
	position: absolute;
	inset: 0;
	/* Dark overlay to make text pop - approx 40% opacity */
	background-color: rgba(0, 0, 0, 0.4);
}
/* Center Content Area */
.hero-center-content {
	position: relative;
	z-index: 5;
	text-align: center;
	color: #ffffff;
}
.hero-contact-title {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(68/ 1920 * 100vw);
	font-weight: 700;
 letter-spacing: calc(5 / 1920 * 100vw);
	line-height: 1;
 margin-bottom: calc(15/ 1920 * 100vw);
	text-transform: uppercase;
}
.hero-contact-subtitle {
 font-size: calc(18/ 1920 * 100vw);
	text-transform: uppercase;
	opacity: 0.9;
}
/* --- Global Styles for Section --- */
.contact-combined-section:after {
	position: absolute;
	content: "";
	background: #fff;
	bottom: 0;
	width: 100%;
	top: 67%;
}
.contact-combined-section .container {
	position: relative;
	z-index: 45;
}
.contact-combined-section {
 padding: calc(170 / 1920 * 100vw) 0 calc(100 / 1920 * 100vw);
	background-color: #A4ACA733;
	position: relative;
	overflow: hidden;
}
.contact-combined-section .container {
	position: relative;
	z-index: 5;
}
/* --- Info Card --- */
.contact-info-card {
	background-color: #ffffff;
 width: calc(1192/ 1920 * 100vw);
	margin: 0 auto;
	position: relative;
 padding: calc(60 / 1920 * 100vw) calc(60 / 1920 * 100vw);
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(40 / 1920 * 100vw) rgba(0,0,0,0.02);
	overflow: hidden;
 margin-bottom: calc(168/ 1920 * 100vw);
}
.card-bg-texture {
	position: absolute;
 top: calc(10/ 1920 * 100vw);
 right: calc(20 / 1920 * 100vw);
 width: calc(1193/ 1920 * 100vw);
	object-fit: contain;
	/* opacity: 0.15; */
	z-index: 1;
}
.info-card-inner {
	position: relative;
	z-index: 5;
}
.contact-card-title {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(48 / 1920 * 100vw);
	color: #2B312C;
 letter-spacing: calc(1 / 1920 * 100vw);
}
.contact-card-tagline {
 font-size: calc(18 / 1920 * 100vw);
	color: #1A6840;
 margin-top: calc(10 / 1920 * 100vw);
	line-height: 1.4;
}
.contact-card-divider:after {
	content: "";
	position: absolute;
 width: calc(64/ 1920 * 100vw);
	height: 2px;
	background: #1A6840;
	left: 0;
	top: 0;
}
.contact-card-divider {
 width: calc(60 / 1920 * 100vw);
	height: 2px;
	background-color: #A4ACA7;
 margin: calc(30 / 1920 * 100vw) 0;
	width: 100%;
	position: relative;
}
/* --- Info Grid --- */
.info-details-grid {
	display: flex;
	flex-direction: column;
}
.info-label {
	display: flex;
	align-items: center;
 gap: calc(12 / 1920 * 100vw);
 margin-bottom: calc(24/ 1920 * 100vw);
}
.label-img {
 width: calc(24 / 1920 * 100vw);
	height: auto;
}
.info-label span {
 font-size: calc(20/ 1920 * 100vw);
	color: #8A988E;
	font-weight: 700;
 letter-spacing: calc(1 / 1920 * 100vw);
	/*font-family: 'Playfair Display', serif;*/
}
.info-value {
 font-size: calc(24 / 1920 * 100vw);
	color: #2B312C;
	font-family: Barlow;
}
.row-separator {
	width: 100%;
	height: 1px;
	background-color: #eeeeee;
 margin: calc(32/ 1920 * 100vw) 0;
}
.info-detail-row {
	display: flex;
	align-items: flex-start;
}
.info-detail-item {
	flex: 1;
}
.vertical-separator {
	width: 1px;
 height: calc(80 / 1920 * 100vw);
	background-color: #eeeeee;
 margin: 0 calc(40 / 1920 * 100vw);
}
.social-links-container {
	display: flex;
 gap: calc(10 / 1920 * 100vw);
}
.social-links-container img {
 height: calc(40 / 1920 * 100vw);
	width: auto;
}
/* --- Form Card --- */
.contact-form-card {
	background-color: #ffffff;
 width: calc(1200 / 1920 * 100vw);
	margin: 0 auto;
 padding: calc(60 / 1920 * 100vw) calc(60 / 1920 * 100vw) calc(100 / 1920 * 100vw);
}
.form-grid-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
 column-gap: calc(32/ 1920 * 100vw);
 row-gap: calc(32/ 1920 * 100vw);
}
.input-group label, .textarea-section label, .section-main-label {
	display: flex;
	align-items: center;
 gap: calc(10 / 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
	color: #8A988E;
 margin-bottom: calc(12 / 1920 * 100vw);
}
.form-label-img {
 width: calc(24/ 1920 * 100vw);
}
.input-group input, .textarea-section textarea {
	width: 100%;
	background-color: #DEE1DF66;
	border: none;
 padding: calc(20 / 1920 * 100vw) calc(25 / 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
 border-radius: calc(4 / 1920 * 100vw);
	font-family: inherit;
}
.textarea-section textarea {
 height: calc(200 / 1920 * 100vw);
	resize: none;
}
/* --- Checkboxes --- */
.checkbox-section {
 margin-top: calc(32/ 1920 * 100vw);
}
.checkbox-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
 row-gap: calc(24 / 1920 * 100vw);
 padding-bottom: calc(32/ 1920 * 100vw);
}
.custom-checkbox {
	display: flex;
	align-items: center;
 gap: calc(5 / 1920 * 100vw);
 font-size: calc(18 / 1920 * 100vw);
	color: #2B312C;
	cursor: pointer;
}
.custom-checkbox input {
 width: calc(15 / 1920 * 100vw);
 height: calc(15 / 1920 * 100vw);
	accent-color: #125136;
}
/* --- Submit Button --- */
.submit-container {
	display: flex;
	justify-content: center;
 margin-top: calc(64 / 1920 * 100vw);
}
.submit-btn-green {
	background-color: #1A6840;
	color: #ffffff;
	border: none;
 padding: calc(16/ 1920 * 100vw) calc(32/ 1920 * 100vw);
 font-size: calc(20 / 1920 * 100vw);
 border-radius: calc(8 / 1920 * 100vw);
	cursor: pointer;
	transition: background 0.3s ease;
}
.submit-btn-green:hover {
	background-color: #0d3b27;
}
.mapSec {
	position: relative;
height:calc(520 / 1920 * 100vw);
	background: url(../images/map2.jpg) no-repeat center center;
	background-size: cover;
}
.mapSec .icon {
width: calc(6 / 1920 * 100vw);
	position: absolute;
	background: url(../images/dots.png) no-repeat center center;
background-size: calc(96 / 1920 * 100vw);
width:calc(76 / 1920 * 100vw);
height: calc(96 / 1920 * 100vw);
	position: absolute;
	top: 50%;
	left: 49.5%;
	-o-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
/* --- Common Problems Panel Styles --- */
.common-problems-wrapper {
	width: 100%;
	/* Strict padding from design */
	background-color: #ffffff;/* Red box border for demonstration or removal as needed */
    /* border: 1px solid red; */
}
.problems-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
 max-width: calc(1300 / 1920 * 100vw); /* Adjusted to fit the specific box layout */
	margin: 0 auto;
}
/* Left Content Area */
.problems-left-content {
	position: relative;
 width: calc(650 / 1920 * 100vw);
}
.problems-main-title {
	/*font-family: 'Playfair Display', serif;*/
 font-size: calc(32 / 1920 * 100vw);
	line-height: 1.7;
	color: #2B312C;
	font-weight: 700;
	position: relative;
	z-index: 2;
	text-transform: uppercase;
}
/* Watermark Checkmark Icon */
.problems-bg-icon {
	position: absolute;
 width: calc(120 / 1920 * 100vw);
	height: auto;
 bottom: calc(-12 / 1920 * 100vw);
 left: calc(312 / 1920 * 100vw);
	/* Faded effect */
	z-index: 1;
	opacity: .6;
}
/* Right List Area */
.problems-right-list {
 width: calc(500 / 1920 * 100vw);
}
.check-list {
	list-style: none;
	display: flex;
	flex-direction: column;
 gap: calc(35 / 1920 * 100vw); /* Equal vertical spacing */
}
.check-item {
	display: flex;
	align-items: center;
 gap: calc(20 / 1920 * 100vw);
}
.list-check-img {
 width: calc(30 / 1920 * 100vw);
	object-fit: contain;
}
.check-item span {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1A6840; /* Brand Green */
 letter-spacing: calc(0.5 / 1920 * 100vw);
	text-transform: uppercase;
}
/* --- Fence Benefits Section Styles --- */
.fence-benefits-section {
 padding: calc(120 / 1920 * 100vw) 0;
	background-color: #A4ACA733; /* Light grey-white background from design */
}
.benefits-header {
 margin-bottom: calc(60 / 1920 * 100vw);
 padding: 0px calc(124/ 1920 * 100vw);
}
/* Grid Layout */
.benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
 gap: calc(24 / 1920 * 100vw);
 padding: 0px calc(60/ 1920 * 100vw);
}
.benefit-card {
	aspect-ratio: 261 / 330; /* Keep cards slightly rectangular/square */
 border-radius: calc(20 / 1920 * 100vw);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
 padding: calc(35 / 1920 * 100vw) calc(30 / 1920 * 100vw);
	transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),  box-shadow 0.4s ease;
	cursor: pointer;/* flex: 1; */
}
.benefit-card:hover .benefit-img:nth-child(1) {
	opacity: 0
}
.benefit-card:hover .benefit-img:nth-child(2) {
	opacity: 1
}
/* White Card Style */
.benefit-card {
	background-color: #ffffff;
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(30 / 1920 * 100vw) rgba(0, 0, 0, 0.02);
}
.white-card .benefit-label {
	color: #1A6840; /* Brand Green */
}
.benefit-card:hover .benefit-label {
	color: #fff !important;
}
/* Green Highlight Card Style */
.benefit-card:hover {
	background-color: #1A6840; /* Brand Green */
}
.green-highlight-card .benefit-label {
	color: #ffffff;
}
/* Common Card Elements */
.benefit-icon-box {
 width: calc(60 / 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
 margin-bottom: calc(19 / 1920 * 100vw);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.benefit-img.current {
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 5;
	opacity: 0;
}
.benefit-img {
	width: 100%;
	height: auto;
	object-fit: contain;
	position: relative;
	z-index: 2;
}
.benefit-label {
 font-size: calc(18 / 1920 * 100vw);
	font-weight: 700;
 line-height: calc(32/ 1920 * 100vw);
	text-transform: uppercase;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
/* Hover Effects */
.benefit-card:hover {
 transform: translateY(calc(-15 / 1920 * 100vw));
 box-shadow: 0 calc(20 / 1920 * 100vw) calc(40 / 1920 * 100vw) rgba(0, 0, 0, 0.08);
}
.benefits-grid, .benefits-grid * {
	-webkit-transition: all 0.2s;
	-o-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
/* --- Installation Process Styles --- */
.install-process-section {
	background-color: #ffffff;
}
.process-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
 column-gap: calc(50 / 1920 * 100vw);
 row-gap: calc(50 / 1920 * 100vw);
}
.process-step-item {
	width: 100%;
}
/* Media Area with Overlapping Number */
.step-media {
	position: relative;
 width: calc(300/ 1920 * 100vw);
	margin: auto;
 height: calc(160 / 1920 * 100vw);
 margin-bottom: calc(20/ 1920 * 100vw);
}
.step-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
 border-radius: calc(15 / 1920 * 100vw);
	display: block;
	margin: auto;
}
/* The White Box Overlap */
.step-number-box {
	position: absolute;
	bottom: 0;
	left: 0;
 width: calc(94/ 1920 * 100vw);
 height: calc(60/ 1920 * 100vw);
	background-color: #ffffff;
 border-radius: 0px calc(22/ 1920 * 100vw) 0px 0px;
	display: flex;
	align-items: center;
	justify-content: center;
}
/* Outlined Number Style */
.step-num {
 font-size: calc(40/ 1920 * 100vw);
	font-weight: 800;
	color: transparent;
 -webkit-text-stroke: calc(1.5 / 1920 * 100vw) #1A6840; /* Brand Green Outline */
	font-family: Arial, sans-serif;
	line-height: 1;
}
/* Step Typography */
.step-info {
 padding-left: calc(5 / 1920 * 100vw);
}
.step-title {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1A6840;
 margin-bottom: calc(4/ 1920 * 100vw);
	text-transform: uppercase;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.step-desc {
 font-size: calc(20 / 1920 * 100vw);
	color: #2B312C;
	line-height: 1.4;
	font-weight: 500;
}
/* --- Fence Options Styles (Red Box) --- */
.fence-options-wrapper {
	width: 100%;
	background-color: #ffffff;
}
.options-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
 column-gap: calc(60 / 1920 * 100vw);
	margin: 0 auto;
}
.option-card {
	width: 100%;
	transition: transform 0.4s ease;
}
/* Media Area with Overlap */
.option-media {
	position: relative;
	width: 100%;
 height: calc(239/ 1920 * 100vw);
}
.option-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
 border-radius: calc(10 / 1920 * 100vw);
}
/* White Box Overlap */
.option-number-box {
	position: absolute;
	bottom: 0;
	left: 0;
 width: calc(93/ 1920 * 100vw);
 height: calc(60 / 1920 * 100vw);
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
 box-shadow: 0 calc(10 / 1920 * 100vw) calc(30 / 1920 * 100vw) rgba(0,0,0,0.06);
	z-index: 2;
}
/* Outlined Number Text */
.option-num {
 font-size: calc(40 / 1920 * 100vw);
	font-weight: 800;
	color: transparent;
 -webkit-text-stroke: calc(1.5 / 1920 * 100vw) #1A6840; /* Brand Green */
	font-family: Arial, sans-serif;
	line-height: 1;
}
/* Typography Under Image */
.option-info {
 padding-top: calc(20 / 1920 * 100vw);
}
.option-title {
 font-size: calc(20 / 1920 * 100vw);
	font-weight: 700;
	color: #1A6840;
 margin-bottom: calc(4/ 1920 * 100vw);
	text-transform: uppercase;
 letter-spacing: calc(0.5 / 1920 * 100vw);
}
.option-desc {
 font-size: calc(20 / 1920 * 100vw);
	color: #2B312C;
	line-height: 1.4;
	font-weight: 500;
}
.check-list.type2 {
	position: relative;
}
.check-list.type2 .check-item {
	position: relative;
 padding-bottom: calc(66 / 1920 * 100vw);
}
.check-list.type2 .check-item .des {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0;
font-size:  calc(20 / 1920 * 100vw);
}