/* Edits_17-09-25 */
.btn-blue {
	border-radius: 0.25rem;
	border-width: 2px;
	--tw-border-opacity: 1;
	border-color: rgba(49, 90, 156, var(--tw-border-opacity));
	--tw-bg-opacity: 1;
	background-color: rgba(49, 90, 156, var(--tw-bg-opacity));
	font-weight: 700;
	--tw-text-opacity: 1;
	color: rgb(255 255 255 / var(--tw-text-opacity));
}

.btn-blue:hover {
	--tw-bg-opacity: 1;
	background-color: rgba(
		36,
		66,
		115,
		var(--tw-bg-opacity)
	); /* darker blue hover */
}

.pest_defence .container .pest_defence_cont {
	padding: 50px 0px;
}

.commercial h2 {
	text-transform: uppercase;
}

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

.commercial .blue-slide::after {
	background-image: linear-gradient(to top right, #315a9c 50%, transparent 50%);
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/*Edits_09-12-25*/
/* From 1760px down */
@media (max-width: 1760px) and (min-width: 1440px) {
	.cscale-size {
		transform: scale(0.85) !important;
	}
}

/* From 1500px down */
@media (max-width: 1500px) and (min-width: 1440px) {
	.cscale-size {
		transform: scale(0.83) !important;
	}
}

/* Between 1440px–1480px */
@media (max-width: 1480px) and (min-width: 1440px) {
	.cscale-size {
		transform: scale(0.82) !important;
	}
}

/*Edits_09-18-25*/

section.certification {
	background: radial-gradient(
		40.08% 55.09% at 36.3% 54.91%,
		#dcdcdc 31.25%,
		#c9c9c9 81.25%,
		#c7c7c7 100%
	);
}

/* Ensure desktop banner video fully covers header without bottom gap */
header .banner_bg {
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	object-fit: cover;
}

.certification_right {
	max-width: 768px;
	padding: 0 1rem;
}

.certification_right h2 {
	max-width: 690px;
	width: 100%;
	margin-inline: unset;
}
.certification_right .font-light {
	max-width: 690px;
	width: 100%;
	margin-inline: unset;
}

/* Between 1440px–1480px */
@media (max-width: 1920px) and (min-width: 1536px) {
	.certification_left img {
		left: clamp(-23.25rem, calc(3.9375rem - 22.6563vw), -17.8125rem);
	}
}

.certification_left img {
	position: relative;
	max-width: unset;
	width: 75vw;
}

@media (max-width: 1535px) {
	.pest_defence_right {
		order: 0 !important;
	}
	.pest_defence_right img {
		margin: auto;
		width: 40vw;
	}
	.certification_left img {
		margin: auto;
		width: 60vw;
	}
	.commercial_grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.commercial {
		height: fit-content !important;
	}

	.certification_right h2 {
		max-width: unset;
		margin-inline: auto;
	}
	.certification_right .font-light {
		max-width: unset;
		margin-inline: auto;
	}

	.sm_hidden {
		display: none !important;64
	}
}

/* ≥1280px (large desktops) */
@media (min-width: 1280px) {
	.certification_right {
		max-width: 1280px;
	}
}

/* ≥1280px small) */
@media (max-width: 1280px) {
	.certification_right {
		max-width: 1280px;
	}
}

/* ≤1024px (tablets / small laptops) */
@media (max-width: 1024px) {
	.certification_right {
		max-width: 1024px;
	}
	.certification_left img {
		width: 80vw;
	}
}

/* ≤768px (portrait tablets / large mobiles) */
@media (max-width: 768px) {
	.pest_defence_right img {
		width: 60vw;
	}
	.certification_right {
		max-width: 768px;
	}
	.certification_left img {
		width: 100vw;
	}
}

/* ≤640px (mobiles) */
@media (max-width: 640px) {
	.certification_right {
		max-width: 640px;
	}
}

.commercial-desc:after {
	content: "";
	background-image: url("../images/front/rcbg.svg");
	width: 100px;
	height: 100px;
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	bottom: -5px;
	right: -5px;
	--tw-rotate: -180deg;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y))
		rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
		scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.commercial-desc:before {
	content: "";
	background-image: url("../images/front/rcbg.svg");
	width: 100px;
	height: 100px;
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	top: -5px;
	left: -5px;
}

.commercial-desc {
	position: relative;
	border: 1px solid #6389c6;
	background: rgba(49, 90, 156, 0.85);
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25) inset;
	transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	opacity: 0;
	transform: translateY(-12px);
	will-change: opacity, transform;
	display: none;
}

.blue-slide {
	width: fit-content !important;
	padding: 5px 25px;
	max-height: 0;
	/* overflow: hidden; */
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transform-origin: center;
	transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: max-height, opacity, transform;
	display: none;
	font-size: 20px;
}

.orig-heading {
	border: 1px solid #fff;
	background: rgba(99, 137, 198, 0.65);
	box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.25) inset;
	flex-shrink: 0;
	padding: 5px 25px; /* match blue-slide */
	max-height: 60px;
	overflow: hidden;
	opacity: 1;
	transform: translateY(0);
	transition: max-height 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease,
		transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: max-height, opacity, transform;
	/* font and color now come from utility classes to match blue-slide */
	font-size: 20px;
}

/* optional visual hover on original heading (not required) */
/* .orig-heading:hover { border: 1px solid red; } */

.commercial-card:hover .blue-slide {
	max-height: 60px; /* tall enough for one-line heading */
	opacity: 1;
	transform: translateY(0) scale(1);
	display: inline-block;
}

.commercial-card:hover .commercial-desc {
	display: block;
	opacity: 1;
	transform: translateY(0);
}

.commercial-card:hover .orig-heading {
	max-height: 0;
	opacity: 0;
	transform: translateY(-12px);
	display: none;
}

/* slight delay so the description follows after the blue-slide appears */
.commercial-card:hover .commercial-desc {
	transition-delay: 0.08s, 0.08s;
}

.commercial_btn {
	padding: 5rem 0;
	gap: 1rem;
	justify-content: center;
	display: flex;
}

.commercial_btn a {
	height: 48px;
}

.commercial_sub-title {
	color: #fff;
	text-align: center;
	font-family: "Bai Jamjuree";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 139%; /* 22.24px */
	margin: auto;
	max-width: 689px;
}

.commercial .empty_desc {
	padding: 19px;
}

/* ≥1280px small) */
@media (max-width: 1280px) {
	.blue-slide {
		position: absolute !important;
	}

	.commercial-card {
		padding-top: 10px;
	}

	.commercial-card:hover .blue-slide {
		position: relative !important;
	}

	.commercial .empty_desc {
		padding: 5px;
	}

	.commercial h2 {
		text-align: left;
	}

	.commercial_sub-title {
		text-align: left;
		max-width: unset;
	}
}

/* mobile) */
@media (max-width: 640px) {
	.commercial_btn {
		display: none;
	}
	.commercial {
		padding-bottom: 20px;
	}
}