/*========================================================*/
/*          Inner Page Styles                             */
/*========================================================*/

/*--------------------------------------------------------------
# Container
--------------------------------------------------------------*/
.container {
	max-width: 1360px;
	margin: 0 auto;
	padding: 0;
}

/*--------------------------------------------------------------
# Platform Section 1 – Hero
--------------------------------------------------------------*/
.platform-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 0;
	overflow: hidden;
	position: relative;
}

.ps1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.ps1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Heading */
.ps1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Subtext */
.ps1-subtext {
	margin: 0 0 36px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Buttons */
.ps1-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 56px;
}

.ps1-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps1-btn-solid {
	background: #ffffff;
	color: #004040;
	border: 2px solid #ffffff;
}

.ps1-btn-solid:hover {
	background: #e8f2fb;
	color: #004040;
	border: 2px solid #e8f2fb;
}

.ps1-btn-outline {
	border: 2px solid #ffffff;
	background: transparent;
	color: #ffffff;
}

.ps1-btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/* Dashboard Image */
.ps1-visual-wrap {
	width: 100%;
}

.ps1-dashboard-img {
	display: block;
	width: 100%;
	height: auto;
}


/*--------------------------------------------------------------
# Platform Section 2 – Platform Overview
--------------------------------------------------------------*/
.platform-section2 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

.ps2-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.ps2-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.ps2-label {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps2-heading {
	margin: 0 0 20px;
	letter-spacing: -0.4px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps2-heading-highlight {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps2-text {
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps2-text p {
	margin: 0 0 12px;
}

.ps2-text p:last-child {
	margin-bottom: 0;
}

/* Right Column */
.ps2-right {
	flex: 1;
	min-width: 0;
}

.ps2-image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: #f1f3f5;
}


.ps2-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Platform Section 3 – Built for Every Business
--------------------------------------------------------------*/
.platform-section3 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.ps3-header {
	text-align: center;
	margin-bottom: 56px;
}

.ps3-heading {
	margin: 0 0 12px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps3-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28.8px;
}

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

/* Card */
.ps3-card {
	padding: 28px 24px 32px;
	transition-delay: 0s, 0s;
	border-radius: 24px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	cursor: default;
}

.ps3-card.ps3-visible:hover {
	translate: 0 -6px;
	box-shadow: 0 16px 40px rgba(20, 105, 186, 0.30);
}


.ps3-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ps3-card:nth-child(2) {
	transition-delay: 0.10s;
}

.ps3-card:nth-child(3) {
	transition-delay: 0.15s;
}

.ps3-card:nth-child(4) {
	transition-delay: 0.20s;
}

.ps3-card:nth-child(5) {
	transition-delay: 0.25s;
}

.ps3-card:nth-child(6) {
	transition-delay: 0.30s;
}

.ps3-card:nth-child(7) {
	transition-delay: 0.35s;
}

.ps3-card:nth-child(8) {
	transition-delay: 0.40s;
}

.ps3-card-icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 24px;
}

.ps3-card-icon svg,
.ps3-card-icon img {
	display: block;
	width: 27px;
	height: 27px;
	flex-shrink: 0;
}

.ps3-card-title {
	margin: 0 0 12px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps3-card-desc {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Platform Section 4 – Designed for Simplicity
--------------------------------------------------------------*/
.platform-section4 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 80px 0;
	overflow: hidden;
	position: relative;
}

.platform-section4::before {
	content: '';
	position: absolute;
	inset: 0;
	background: url('http://localhost/hrms/wp-content/uploads/2026/06/platform-section4-Bg.png') center center / cover no-repeat;
	z-index: 0;
}

.ps4-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.ps4-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.ps4-heading {
	margin: 0 0 20px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps4-text {
	margin: 0 0 36px;
	color: #F3F3F3;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps4-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 50px;
	border: 2px solid #ffffff;
	background: transparent;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
	color: #ffffff;
	text-align: center;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps4-btn:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/* Right Column */
.ps4-right {
	flex: 1;
	min-width: 0;
}


.ps4-image-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #f0f0eb;
	margin: -40px 0;
}

.ps4-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Platform Section 5 – How FHR Simplifies HR
--------------------------------------------------------------*/
.platform-section5 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.ps5-header {
	text-align: center;
	margin-bottom: 64px;
}

.ps5-heading {
	margin: 0 0 16px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps5-heading-line {
	display: block;
	margin: 0 auto;
	border-radius: 9999px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	width: 80px;
	height: 6px;
}

/* Steps row */
.ps5-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
	position: relative;
}


.ps5-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 28px 20px;
	border-radius: 16px;
}


.ps5-step.ps5-visible:hover {
	background: #f6fdfe;
	box-shadow: 0 8px 32px rgba(19, 179, 195, 0.12);
}

.ps5-step.ps5-visible:hover .ps5-step-circle {
	box-shadow: 0 8px 24px rgba(19, 179, 195, 0.35);
	transition: box-shadow 0.3s ease;
}

.ps5-step:nth-child(1) {
	transition-delay: 0.05s;
}

.ps5-step:nth-child(2) {
	transition-delay: 0.15s;
}

.ps5-step:nth-child(3) {
	transition-delay: 0.25s;
}

.ps5-step:nth-child(4) {
	transition-delay: 0.35s;
}

.ps5-step-circle {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	border-radius: 9999px;
	border: 4px solid #ffffff;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ps5-step-num {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.ps5-step-title {
	margin: 0 0 12px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps5-step-desc {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28.8px;
}

/*--------------------------------------------------------------
# Platform Section 6 – Integration
--------------------------------------------------------------*/
.platform-section6 {
	padding: 80px 0;
	overflow: hidden;
	position: relative;
	background: linear-gradient(90deg, #067D7D 0%, #BFE9EC 100%);
}

.ps6-inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.ps6-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.ps6-label {
	display: block;
	margin-bottom: 12px;
	color: #BEF2F8;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps6-heading {
	margin: 0 0 20px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps6-text {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Right Column */
.ps6-right {
	flex: 1;
	min-width: 0;
}


.ps6-image-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #f0f0eb;
	margin: -40px 0;
}

.ps6-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Platform Section 7 – Built for Every Business
--------------------------------------------------------------*/
.platform-section7 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

.ps7-header {
	text-align: center;
	margin-bottom: 56px;
}

.ps7-heading {
	margin: 0 0 12px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps7-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 28.8px;
}

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

/* Card */
.ps7-card {
	background: #f5f5f5;
	border-radius: 24px;
	padding: 28px 24px 32px;
	cursor: default;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ps7-card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 0;
}


.ps7-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ps7-card:nth-child(2) {
	transition-delay: 0.10s;
}

.ps7-card:nth-child(3) {
	transition-delay: 0.15s;
}

.ps7-card:nth-child(4) {
	transition-delay: 0.20s;
}

.ps7-card.ps7-visible:hover {
	box-shadow: 0 8px 32px rgba(6, 125, 125, 0.20);
	translate: 0 -4px;
}

.ps7-card.ps7-visible:hover::before {
	opacity: 1;
}

.ps7-card-icon,
.ps7-card-title,
.ps7-card-desc {
	position: relative;
	z-index: 1;
}

.ps7-card.ps7-visible:hover .ps7-card-title {
	color: #ffffff;
	transition: color 0.4s ease;
}

.ps7-card.ps7-visible:hover .ps7-card-desc {
	color: #ffffff;
	transition: color 0.4s ease;
}

.ps7-card.ps7-visible:hover .ps7-card-icon svg path {
	fill: #BEF2F8;
	transition: fill 0.4s ease;
}

.ps7-card-icon {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 24px;
}

.ps7-card-icon svg,
.ps7-card-icon img {
	display: block;
	width: 27px;
	height: 27px;
	flex-shrink: 0;
}

.ps7-card-title {
	margin: 0 0 12px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps7-card-desc {
	margin: 0;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Platform Section 8 – Why Choose FHR
--------------------------------------------------------------*/
.platform-section8 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

.ps8-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.ps8-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.ps8-heading {
	margin: 0 0 16px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps8-heading-highlight {
	background: linear-gradient(90deg, #003D3D 0%, #016871 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps8-text {
	margin: 0 0 28px;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Feature List */
.ps8-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ps8-feature-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	transition-delay: 0s, 0s;
	border-radius: 16px;
	background: linear-gradient(90deg, #55AAAA 0%, #AAD5D5 100%);
	box-shadow: 0 4px 20px 0 rgba(16, 79, 80, 0.05);
	backdrop-filter: blur(10px);
	cursor: default;
}

.ps8-feature-item.ps8-visible:hover {
	translate: 4px 0;
	box-shadow: 0 8px 28px 0 rgba(16, 79, 80, 0.18);
}

.ps8-feature-item.ps8-visible:hover .ps8-feature-icon {
	background: #004040;
	transition: background 0.35s ease;
}

.ps8-feature-item.ps8-visible:hover .ps8-feature-icon svg path {
	fill: #BEF2F8;
	transition: fill 0.35s ease;
}


.ps8-feature-item:nth-child(1) {
	transition-delay: 0.10s;
}

.ps8-feature-item:nth-child(2) {
	transition-delay: 0.18s;
}

.ps8-feature-item:nth-child(3) {
	transition-delay: 0.26s;
}

.ps8-feature-item:nth-child(4) {
	transition-delay: 0.34s;
}

.ps8-feature-item:nth-child(5) {
	transition-delay: 0.42s;
}

.ps8-feature-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background: #BEF2F8;
	padding: 12px;
}

.ps8-feature-icon svg,
.ps8-feature-icon img {
	display: block;
	width: 22px;
	height: 22px;
}

.ps8-feature-body {
	flex: 1;
	min-width: 0;
}

.ps8-feature-title {
	margin: 0 0 2px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps8-feature-desc {
	margin: 0;
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

/* Right Column */
.ps8-right {
	flex: 1;
	min-width: 0;
}


.ps8-image-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #f0f0eb;
}

.ps8-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Platform Section 9 – Testimonials
--------------------------------------------------------------*/
.platform-section9 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

/* Header */
.ps9-header {
	text-align: center;
	margin-bottom: 56px;
}

.ps9-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 20px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	margin-bottom: 20px;
}

.ps9-heading {
	margin: 0 0 14px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps9-heading-highlight {
	background: linear-gradient(90deg, #067D7D 0%, #13B3C3 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps9-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Slider */
.ps9-slider-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.ps9-slider-wrap::before,
.ps9-slider-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.ps9-slider-wrap::before {
	left: 0;
	background: linear-gradient(to right, #ffffff 0%, transparent 100%);
}

.ps9-slider-wrap::after {
	right: 0;
	background: linear-gradient(to left, #ffffff 0%, transparent 100%);
}

.ps9-slider-track {
	display: flex;
	width: max-content;
}

.ps9-slider-track.ps9-running {
	animation: ps9Scroll 30s linear infinite;
}

.ps9-slider-track:hover {
	animation-play-state: paused;
}

@keyframes ps9Scroll {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.ps9-slides-set {
	display: flex;
	gap: 24px;
	padding: 16px 12px;
}

/* Card */
.ps9-card {
	background: #f5f5f5;
	border-radius: 20px;
	padding: 28px 28px 24px;
	width: 340px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: box-shadow 0.3s ease, translate 0.3s ease;
}

.ps9-card:hover {
	box-shadow: 0 8px 32px rgba(19, 179, 195, 0.12);
	translate: 0 -4px;
}

.ps9-card-stars {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ps9-card-text {
	margin: 0;
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	flex: 1;
}

.ps9-card-author {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ps9-author-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: #dde4ec;
}

.ps9-author-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ps9-author-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.ps9-author-name {
	display: block;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps9-author-role {
	display: block;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%;
}

/*--------------------------------------------------------------
# Platform Section 10 – Pricing
--------------------------------------------------------------*/
.platform-section10 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

/* Header */
.ps10-header {
	text-align: center;
	margin-bottom: 56px;
}

.ps10-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 20px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	margin-bottom: 20px;
}

.ps10-heading {
	margin: 0 0 14px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps10-heading-highlight {
	background: linear-gradient(90deg, #067D7D 0%, #13B3C3 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps10-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Cards row */
.ps10-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: center;
}

/* Base card */
.ps10-card {
	padding: 36px 32px 40px;
	display: flex;
	flex-direction: column;
	transition-delay: 0s, 0s, 0s, 0s;
	border-radius: 20px;
	border: 1px solid #F3F3F3;
	background: linear-gradient(90deg, #003D3D 0%, #016871 100%);
}


.ps10-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ps10-card:nth-child(2) {
	transition-delay: 0.15s;
}

.ps10-card:nth-child(3) {
	transition-delay: 0.25s;
}

.ps10-card.ps10-visible:hover {
	box-shadow: 0 12px 40px rgba(0, 64, 64, 0.25);
	translate: 0 -6px;
}

/* Featured card */
.ps10-card-featured {
	padding: 44px 32px 48px;
	position: relative;
	z-index: 1;
	border-radius: 20px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
}

.ps10-card-featured.ps10-visible:hover {
	box-shadow: 0 16px 48px rgba(19, 179, 195, 0.35);
}

/* Icon */
.ps10-card-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #14A4A4;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin: 0 auto 16px;
}

.ps10-card-featured .ps10-card-icon-wrap {
	background: #ffffff;
}

.ps10-card-icon-wrap svg,
.ps10-card-icon-wrap img {
	display: block;
	width: 28px;
	height: 28px;
}

/* Plan name */
.ps10-card-name {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 600;
	line-height: 30px;
}

/* Price */
.ps10-card-price {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	margin-bottom: 8px;
	line-height: 1;
	justify-content: center;
}

.ps10-price-amount {
	color: #ffffff;
	text-align: center;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-size: 46px;
	font-style: normal;
	font-weight: 800;
	line-height: 60px;
	letter-spacing: -0.92px;
}

.ps10-price-period {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 800;
	line-height: 40px;
	letter-spacing: -0.36px;
	padding-bottom: 0;
}

/* Billing */
.ps10-card-billing {
	margin: 0 0 28px;
	color: #ffffff;
	text-align: center;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
}

/* Features list */
.ps10-features-list {
	list-style: none;
	margin: 0 0 36px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	flex: 1;
}

.ps10-feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ps10-feature-icon {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.ps10-feature-icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

.ps10-feature-text {
	color: #ffffff;
	font-family: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
}

/* CTA Button */
.ps10-card-btn {
	display: block;
	padding: 14px 24px;
	text-decoration: none;
	transition: background 0.25s ease, color 0.25s ease;
	white-space: nowrap;
	margin-top: auto;
	border-radius: 1234px;
	background: #E2E2E2;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 400;
	line-height: 32px;
}

.ps10-card-btn:hover {
	background: #ffffff;
	color: #000000;
}

/*--------------------------------------------------------------
# Platform Section 11 – FAQ
--------------------------------------------------------------*/
.platform-section11 {
	padding: 90px 0 100px;
	overflow: hidden;
	background: linear-gradient(90deg, #003D3D 0%, #016871 100%);
}

/* Header */
.ps11-header {
	text-align: center;
	margin-bottom: 52px;
}

.ps11-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	padding: 6px 20px;
	border-radius: 50px;
	margin-bottom: 20px;
	color: #1469ba;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps11-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps11-subtext {
	margin: 0;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Accordion */
.ps11-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ps11-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	overflow: hidden;
	transition: background 0.2s ease;
}


.ps11-item:nth-child(1) {
	transition-delay: 0.05s;
}

.ps11-item:nth-child(2) {
	transition-delay: 0.10s;
}

.ps11-item:nth-child(3) {
	transition-delay: 0.15s;
}

.ps11-item:nth-child(4) {
	transition-delay: 0.20s;
}

.ps11-item:nth-child(5) {
	transition-delay: 0.25s;
}

.ps11-item:hover {
	background: rgba(255, 255, 255, 0.14);
}

.ps11-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
}

.ps11-question span {
	flex: 1;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps11-chevron {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.ps11-answer {
	padding: 0 28px 24px;
}

.ps11-answer p,
.ps11-answer div {
	margin: 0;
	color: #e2e2e2;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Platform Section 12 – CTA Banner
--------------------------------------------------------------*/
.platform-section12 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.ps12-banner {
	background: linear-gradient(90deg, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


/* Decorative circles */
.ps12-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.ps12-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.ps12-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

/* Content */
.ps12-content {
	position: relative;
	z-index: 1;
}

.ps12-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ps12-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps12-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ps12-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ps12-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.ps12-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.ps12-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.ps12-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# About Section 1 – Hero
--------------------------------------------------------------*/
.about-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.as1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.as1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Heading */
.as1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Subtext */
.as1-subtext {
	margin: 0 0 36px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Resources Section 1 – Hero
--------------------------------------------------------------*/
.resources-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.rrs1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.rrs1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.rrs1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 900px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.rrs1-subtext {
	margin: 0;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Contact Section 1 – Hero
--------------------------------------------------------------*/
.contact-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.cts1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.cts1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cts1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 900px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cts1-subtext {
	margin: 0;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Responsive – 1400px */
@media only screen and (max-width: 1400px) {
	.cts1-badge {
		font-size: 14px;
	}

	.cts1-heading {
		font-size: 40px;
		line-height: 1.2;
	}

	.cts1-subtext {
		font-size: 15px;
	}
}

/* Responsive – 1280px */
@media only screen and (max-width: 1280px) {
	.cts1-heading {
		font-size: 48px;
	}
}

/* Responsive – 1024px */
@media only screen and (max-width: 1024px) {
	.contact-section1 {
		padding: 160px 0 90px;
	}

	.cts1-heading {
		font-size: 42px;
	}
}

/* Responsive – 768px */
@media only screen and (max-width: 768px) {
	.contact-section1 {
		padding: 140px 0 72px;
	}

	.cts1-heading {
		font-size: 34px;
	}
}

/* Responsive – 600px */
@media only screen and (max-width: 600px) {
	.contact-section1 {
		padding: 120px 0 56px;
	}

	.contact-section1 .container {
		padding: 0 16px;
	}

	.cts1-badge {
		font-size: 12px;
		padding: 6px 14px;
	}

	.cts1-heading {
		font-size: 28px;
		line-height: 140%;
	}

	.cts1-subtext {
		font-size: 14px;
		line-height: 24px;
	}
}

/*--------------------------------------------------------------
# Contact Section 2 – Form + Info
--------------------------------------------------------------*/
.contact-section2 {
	background: #ffffff;
	padding: 80px 0 100px;
	overflow: hidden;
}

/* Two-column inner layout */
.cts2-inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 28px;
	align-items: stretch;
}

/* ── Left: Form card ── */
.cts2-left {
	background: #f3f4f5;
	border-radius: 20px;
	padding: 48px 44px 44px;
	display: flex;
	flex-direction: column;
}


.cts2-form-heading {
	margin: 0 0 10px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-weight: 700;
	line-height: 140%;
}

.cts2-form-subtext {
	margin: 0 0 32px;
	color: #4a5568;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
}

/* Form rows */
.cts2-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

.cts2-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.cts2-field-full {
	margin-bottom: 20px;
}

.cts2-field label {
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 22px;
}

.cts2-field input,
.cts2-field textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 10px;
	border: 1.5px solid #e2e6ea;
	background: #ffffff;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	outline: none;
	transition: border-color 0.2s ease;
	box-sizing: border-box;
	resize: none;
}

.cts2-field input::placeholder,
.cts2-field textarea::placeholder {
	color: #a0aec0;
}

.cts2-field input:focus,
.cts2-field textarea:focus {
	border-color: #067d7d;
}

/* Phone with country-code dropdown */
.cts2-phone-wrap {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	border: 1.5px solid #e2e6ea;
	background: #ffffff;
	overflow: hidden;
	transition: border-color 0.2s ease;
}

.cts2-phone-wrap:focus-within {
	border-color: #067d7d;
}

.cts2-country-code {
	flex-shrink: 0;
	padding: 12px 10px 12px 14px;
	border: none;
	border-right: 1.5px solid #e2e6ea;
	background: #ffffff;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	outline: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%234a5568' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	padding-right: 26px;
}

.cts2-phone-wrap input[type="tel"] {
	flex: 1;
	border: none;
	border-radius: 0;
	padding: 12px 16px;
}

/* Form footer */
.cts2-form {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.cts2-form-footer {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	margin-top: auto;
}

.cts2-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 32px;
	border-radius: 50px;
	border: none;
	background: linear-gradient(90deg, #13B3C3 0%, #067d7d 100%);
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}

.cts2-submit:hover {
	opacity: 0.88;
}

.cts2-submit.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

.cts2-form-note {
	margin: 0;
	color: #718096;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 22px;
}

/* Feedback */
.cts2-feedback {
	margin-top: 16px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	display: none;
}

.cts2-feedback.is-success {
	color: #067d7d;
}

.cts2-feedback.is-error {
	color: #c0392b;
}

/* ── Right column ── */
.cts2-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}


/* Reach Us Directly card */
.cts2-info-card {
	background: #f3f4f5;
	border-radius: 20px;
	padding: 36px 36px 40px;
	flex: 1;
}

.cts2-info-heading {
	margin: 0 0 28px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 140%;
}

.cts2-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.cts2-info-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.cts2-info-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #d7f6f9;
	flex-shrink: 0;
}

.cts2-info-icon svg {
	display: block;
}

.cts2-info-detail {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding-top: 2px;
}

.cts2-info-label {
	color: #718096;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 20px;
}

.cts2-info-value {
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
}

a.cts2-info-value:hover {
	color: #067d7d;
}

/* Working Hours card */
.cts2-hours-card {
	background: #0d2e2e;
	border-radius: 20px;
	padding: 36px 36px 40px;
}

.cts2-hours-heading-wrap {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 28px;
}

.cts2-hours-heading {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	line-height: 140%;
}

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

.cts2-hours-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.cts2-hours-row:last-child {
	border-bottom: none;
}

.cts2-hours-day {
	color: #b0c4c4;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
}

.cts2-hours-time {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	white-space: nowrap;
}

/* Responsive – tablet */
@media only screen and (max-width: 1024px) {
	.cts2-inner {
		grid-template-columns: 1fr;
	}

	.cts2-left {
		transform: translateY(30px);
	}


	.cts2-right {
		transform: translateY(30px);
		transition-delay: 0.1s;
	}

}

/* Responsive – mobile */
@media only screen and (max-width: 680px) {
	.contact-section2 {
		padding: 56px 0 72px;
	}

	.cts2-left {
		padding: 32px 24px 32px;
	}

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

	.cts2-form-footer {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	.cts2-submit {
		width: 100%;
		justify-content: center;
	}

	.cts2-info-card,
	.cts2-hours-card {
		padding: 28px 24px 32px;
	}
}

/*--------------------------------------------------------------
# Blog Section 1 – Hero
--------------------------------------------------------------*/
.blog-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.bls1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.bls1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.bls1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 900px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.bls1-subtext {
	margin: 0;
	max-width: 700px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Responsive – 1400px */
@media only screen and (max-width: 1400px) {
	.bls1-badge {
		font-size: 14px;
	}

	.bls1-heading {
		font-size: 40px;
		line-height: 1.2;
	}

	.bls1-subtext {
		font-size: 15px;
	}
}

/* Responsive – 1280px */
@media only screen and (max-width: 1280px) {
	.bls1-heading {
		font-size: 48px;
	}
}

/* Responsive – 1024px */
@media only screen and (max-width: 1024px) {
	.blog-section1 {
		padding: 160px 0 90px;
	}

	.bls1-heading {
		font-size: 42px;
	}
}

/* Responsive – 768px */
@media only screen and (max-width: 768px) {
	.blog-section1 {
		padding: 140px 0 72px;
	}

	.bls1-heading {
		font-size: 34px;
	}
}

/* Responsive – 600px */
@media only screen and (max-width: 600px) {
	.blog-section1 {
		padding: 120px 0 56px;
	}

	.blog-section1 .container {
		padding: 0 16px;
	}

	.bls1-badge {
		font-size: 12px;
		padding: 6px 14px;
	}

	.bls1-heading {
		font-size: 28px;
		line-height: 140%;
	}

	.bls1-subtext {
		font-size: 14px;
		line-height: 24px;
	}
}

/*--------------------------------------------------------------
# Contact Section 4 – CTA Banner
--------------------------------------------------------------*/
.contact-section4 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.cts4-banner {
	background: linear-gradient(to right, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


.cts4-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.cts4-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.cts4-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

.cts4-content {
	position: relative;
	z-index: 1;
}

.cts4-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cts4-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cts4-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.cts4-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cts4-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.cts4-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.cts4-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.cts4-btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.contact-section4 {
		padding: 48px 0 64px;
	}

	.cts4-banner {
		padding: 56px 36px;
	}

	.cts4-heading {
		font-size: 30px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.contact-section4 {
		padding: 40px 0 56px;
	}

	.contact-section4 .container {
		padding: 0 16px;
	}

	.cts4-banner {
		padding: 48px 24px;
		border-radius: 18px;
	}

	.cts4-heading {
		font-size: 22px;
	}

	.cts4-subtext {
		font-size: 14px;
		margin-bottom: 24px;
	}

	.cts4-btns {
		flex-direction: column;
		gap: 12px;
	}

	.cts4-btn {
		width: 100%;
		text-align: center;
		padding: 11px 24px;
		font-size: 15px;
	}

	.cts4-deco-bl {
		width: 140px;
		height: 140px;
		left: -50px;
		bottom: -50px;
	}

	.cts4-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}
}

/*--------------------------------------------------------------
# Contact Section 3 – Find Us / Map
--------------------------------------------------------------*/
.contact-section3 {
	background: linear-gradient(90deg, #2a9d9d 0%, #7fd4dd 100%);
	padding: 72px 0 80px;
	overflow: hidden;
}

/* Heading block */
.cts3-top {
	margin-bottom: 32px;
}


.cts3-heading {
	margin: 0 0 10px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cts3-subtext {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

/* Map container */
.cts3-map-wrap {
	border-radius: 18px;
	overflow: hidden;
	background: #e8eaed;
	line-height: 0;
}


.cts3-map {
	display: block;
	width: 100%;
	height: 460px;
	border: 0;
	filter: grayscale(18%) sepia(22%) hue-rotate(140deg) saturate(0.78) brightness(1.04) contrast(1.03);
	-webkit-filter: grayscale(18%) sepia(22%) hue-rotate(140deg) saturate(0.78) brightness(1.04) contrast(1.03);
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.contact-section3 {
		padding: 56px 0 64px;
	}

	.cts3-heading {
		font-size: 26px;
	}

	.cts3-map {
		height: 360px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.contact-section3 {
		padding: 48px 0 56px;
	}

	.contact-section3 .container {
		padding: 0 16px;
	}

	.cts3-heading {
		font-size: 22px;
	}

	.cts3-subtext {
		font-size: 14px;
		line-height: 24px;
	}

	.cts3-map {
		height: 280px;
	}

	.cts3-map-wrap {
		border-radius: 12px;
	}
}

/*--------------------------------------------------------------
# Resources Section 2 – Explore by Category
--------------------------------------------------------------*/
.resources-section2 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

/* Header */
.rrs2-header {
	text-align: center;
	margin-bottom: 60px;
}

.rrs2-heading {
	margin: 0 0 18px;
	color: #0d1b2a;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.rrs2-heading-line {
	display: block;
	margin: 0 auto;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
}

/* 4-column card grid */
.rrs2-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

/* Card */
.rrs2-card {
	display: flex;
	flex-direction: column;
	padding: 36px 32px 40px;
	border-radius: 20px;
	background: #f3f4f5;
}


.rrs2-card:nth-child(1) {
	transition-delay: 0.05s;
}

.rrs2-card:nth-child(2) {
	transition-delay: 0.13s;
}

.rrs2-card:nth-child(3) {
	transition-delay: 0.21s;
}

.rrs2-card:nth-child(4) {
	transition-delay: 0.29s;
}

/* Icon box */
.rrs2-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: #d7f6f9;
	margin-bottom: 28px;
	flex-shrink: 0;
}

.rrs2-card-icon svg,
.rrs2-card-icon img {
	width: 26px;
	height: 26px;
	display: block;
}

/* Title */
.rrs2-card-title {
	margin: 0 0 14px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Body text */
.rrs2-card-text {
	margin: 0 0 28px;
	color: #4a5568;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	flex: 1;
}

/* CTA link */
.rrs2-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #067d7d;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	margin-top: auto;
	transition: gap 0.2s ease, opacity 0.2s ease;
}

.rrs2-card-link:hover {
	gap: 10px;
	opacity: 0.82;
}

.rrs2-card-link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* Responsive – tablet */
@media only screen and (max-width: 1024px) {
	.resources-section2 {
		padding: 80px 0;
	}

	.rrs2-cards {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;
	}

	.rrs2-card:nth-child(3),
	.rrs2-card:nth-child(4) {
		transition-delay: 0.1s;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.resources-section2 {
		padding: 60px 0;
	}

	.rrs2-heading {
		font-size: 26px;
	}

	.rrs2-header {
		margin-bottom: 40px;
	}

	.rrs2-cards {
		grid-template-columns: 1fr;
	}

	.rrs2-card {
		padding: 28px 24px 32px;
	}

	.rrs2-card:nth-child(n) {
		transition-delay: 0.05s;
	}
}

/*--------------------------------------------------------------
# Resources Section 3 – Trending Insights
--------------------------------------------------------------*/
.resources-section3 {
	background: linear-gradient(90deg, #2a9d9d 0%, #7fd4dd 100%);
	padding: 80px 0 100px;
	overflow: hidden;
}

/* Top bar */
.rrs3-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.rrs3-top-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.rrs3-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	border-radius: 100px;
	background: #d7f6f9;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	width: fit-content;
}

.rrs3-heading {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}

.rrs3-viewall {
	display: inline-flex;
	align-items: center;
	padding: 10px 28px;
	border-radius: 100px;
	border: 2px solid rgba(255, 255, 255, 0.7);
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background 0.22s ease, border-color 0.22s ease;
}

.rrs3-viewall:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.7);
}

/* Asymmetric 2-column grid */
.rrs3-grid {
	display: grid;
	grid-template-columns: 1.48fr 1fr;
	gap: 20px;
	align-items: stretch;
}

/* Shared card base */
.rrs3-card {
	display: flex;
	flex-direction: column;
	border-radius: 20px;
	background: #f3f4f5;
	overflow: hidden;
	text-decoration: none;
}


.rrs3-card-featured {
	transition-delay: 0s;
}

.rrs3-col-secondary .rrs3-card:nth-child(1) {
	transition-delay: 0.12s;
}

.rrs3-col-secondary .rrs3-card:nth-child(2) {
	transition-delay: 0.24s;
}

.rrs3-card:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

/* Image area */
.rrs3-card-image {
	width: 100%;
	background: #dde0e3;
	flex-shrink: 0;
	overflow: hidden;
}

.rrs3-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rrs3-card-featured .rrs3-card-image {
	height: 420px;
}

.rrs3-card-secondary .rrs3-card-image {
	height: 180px;
}

/* Card body */
.rrs3-card-body {
	padding: 28px 32px 36px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.rrs3-card-title {
	margin: 0;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.rrs3-card-featured .rrs3-card-title {
	font-size: 26px;
}

.rrs3-card-secondary .rrs3-card-title {
	font-size: 18px;
}

.rrs3-card-excerpt {
	margin: 0;
	color: #4a5568;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
}

/* Right secondary column – two stacked cards */
.rrs3-col-secondary {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.rrs3-col-secondary .rrs3-card {
	flex: 1;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.resources-section3 {
		padding: 60px 0 72px;
	}

	.rrs3-grid {
		grid-template-columns: 1fr;
	}

	.rrs3-card-featured .rrs3-card-image {
		height: 300px;
	}

	.rrs3-heading {
		font-size: 28px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.resources-section3 {
		padding: 48px 0 56px;
	}

	.rrs3-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		margin-bottom: 28px;
	}

	.rrs3-heading {
		font-size: 24px;
	}

	.rrs3-card-featured .rrs3-card-image {
		height: 220px;
	}

	.rrs3-card-secondary .rrs3-card-image {
		height: 160px;
	}

	.rrs3-card-body {
		padding: 22px 22px 28px;
	}

	.rrs3-card-featured .rrs3-card-title {
		font-size: 22px;
	}
}

/*--------------------------------------------------------------
# Resources Section 4 – CTA Banner
--------------------------------------------------------------*/
.resources-section4 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.rrs4-banner {
	background: linear-gradient(to right, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


/* Decorative circles */
.rrs4-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.rrs4-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.rrs4-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

/* Content */
.rrs4-content {
	position: relative;
	z-index: 1;
}

.rrs4-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.rrs4-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.rrs4-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.rrs4-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.rrs4-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.rrs4-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.rrs4-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.rrs4-btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.resources-section4 {
		padding: 48px 0 64px;
	}

	.rrs4-banner {
		padding: 56px 36px;
	}

	.rrs4-heading {
		font-size: 30px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.resources-section4 {
		padding: 40px 0 56px;
	}

	.resources-section4 .container {
		padding: 0 16px;
	}

	.rrs4-banner {
		padding: 48px 24px;
		border-radius: 18px;
	}

	.rrs4-heading {
		font-size: 22px;
	}

	.rrs4-subtext {
		font-size: 14px;
		margin-bottom: 24px;
	}

	.rrs4-btns {
		flex-direction: column;
		gap: 12px;
	}

	.rrs4-btn {
		width: 100%;
		text-align: center;
		padding: 11px 24px;
		font-size: 15px;
	}

	.rrs4-deco-bl {
		width: 140px;
		height: 140px;
		left: -50px;
		bottom: -50px;
	}

	.rrs4-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}
}

/*--------------------------------------------------------------
# About Section 3 – Who We Are
--------------------------------------------------------------*/
.about-section3 {
	background: linear-gradient(135deg, #0f7a6a 0%, #3eccd8 100%);
	padding: 80px 0;
	overflow: hidden;
}

.as3-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.as3-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.as3-label {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as3-heading {
	margin: 0 0 24px;
	letter-spacing: -0.3px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as3-text {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as3-text p {
	margin: 0 0 12px;
}

.as3-text p:last-child {
	margin-bottom: 0;
}

/* Right Column */
.as3-right {
	flex: 1;
	min-width: 0;
}

.as3-image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: #f0f0eb;
}


.as3-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# About Section 2 – Trusted Brands / Logo Ticker
--------------------------------------------------------------*/
.about-section2 {
	background: linear-gradient(180deg, #f4f6f8 0%, #ffffff 100%);
	padding: 64px 0 60px;
	overflow: hidden;
}

.as2-inner {
	text-align: center;
	margin-bottom: 48px;
}

.as2-heading {
	margin: 0 0 12px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as2-subtext {
	margin: 0;
	color: #4c4c4c;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Logos ticker */
.as2-logos-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.as2-logos-wrap::before,
.as2-logos-wrap::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: 120px;
	z-index: 2;
	pointer-events: none;
}

.as2-logos-wrap::before {
	left: 0;
	background: linear-gradient(to right, #f4f6f8, transparent);
}

.as2-logos-wrap::after {
	right: 0;
	background: linear-gradient(to left, #ffffff, transparent);
}

.as2-logos-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

.as2-logos-set {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
}

.as2-logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 40px;
	flex-shrink: 0;
}

.as2-logo-item img {
	height: 44px;
	width: auto;
	display: block;
	filter: grayscale(100%);
	opacity: 0.7;
	transition: filter 0.25s ease, opacity 0.25s ease;
}

.as2-logo-item img:hover {
	filter: grayscale(0%);
	opacity: 1;
}

@keyframes as2-ticker {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-50%);
	}
}

.as2-logos-track.as2-running {
	animation: as2-ticker 28s linear infinite;
}

.as2-logos-track.as2-running:hover {
	animation-play-state: paused;
}

/*--------------------------------------------------------------
# About Section 4 – Mission & Vision
--------------------------------------------------------------*/
.about-section4 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

/* Header */
.as4-header {
	text-align: center;
	margin-bottom: 56px;
}

.as4-heading {
	margin: 0 0 16px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as4-heading-line {
	display: block;
	margin: 0 auto;
	border-radius: 9999px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	width: 80px;
	height: 6px;
}

/* Cards */
.as4-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 32px;
}

.as4-card {
	padding: 40px;
	border-radius: 24px;
	cursor: default;
}


.as4-card-mission {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	transition-delay: 0.05s;
}

.as4-card-vision {
	background: linear-gradient(90deg, #067D7D 0%, #13B3C3 100%);
	transition-delay: 0.15s;
}

.as4-card.as4-visible:hover {
	translate: 0 -6px;
	box-shadow: 0 16px 40px rgba(20, 105, 186, 0.25);
}

.as4-card-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
}

.as4-card-icon {
	font-size: 28px;
	line-height: 1;
	flex-shrink: 0;
}

.as4-card-title {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as4-card-text {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# About Section 5 – Our Approach
--------------------------------------------------------------*/
.about-section5 {
	background: linear-gradient(135deg, #0f7a6a 0%, #3eccd8 100%);
	padding: 80px 0;
	overflow: hidden;
}

.as5-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.as5-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.as5-label {
	display: inline-flex;
	align-items: center;
	padding: 7px 18px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as5-heading {
	margin: 0 0 24px;
	letter-spacing: -0.3px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as5-text {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as5-text p {
	margin: 0 0 12px;
}

.as5-text p:last-child {
	margin-bottom: 0;
}

/* Right Column */
.as5-right {
	flex: 1;
	min-width: 0;
}

.as5-image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: #f0f0eb;
}


.as5-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# About Section 6 – Our Team Slider
--------------------------------------------------------------*/
.about-section6 {
	background: #f4f6f8;
	padding: 80px 0 90px;
	overflow: hidden;
}

.as6-header {
	max-width: 780px;
	margin-bottom: 48px;
}

.as6-heading {
	margin: 0 0 16px;
	letter-spacing: -0.3px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as6-text {
	color: #4c4c4c;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as6-text p {
	margin: 0;
}

/* Slider */
.as6-slider-wrap {
	width: 100%;
	overflow: hidden;
	position: relative;
	padding: 0 14px;
}

.as6-slider-track {
	display: flex;
	width: max-content;
}

.as6-slides-set {
	display: flex;
	gap: 28px;
	will-change: transform;
}

/* Slide card */
.as6-slide {
	width: 320px;
	flex-shrink: 0;
}

.as6-slide-img {
	width: 100%;
	height: 400px;
	border-radius: 16px;
	overflow: hidden;
	background: #dde4ec;
	margin-bottom: 20px;
}

.as6-slide-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.as6-slide:hover .as6-slide-img img {
	transform: scale(1.05);
}

.as6-slide-name {
	margin: 0 0 6px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as6-slide-role {
	display: block;
	color: #067D7D;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# About Section 7 – CTA Banner
--------------------------------------------------------------*/
.about-section7 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.as7-banner {
	background: linear-gradient(90deg, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


/* Decorative circles */
.as7-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.as7-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.as7-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

/* Content */
.as7-content {
	position: relative;
	z-index: 1;
}

.as7-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.as7-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as7-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.as7-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.as7-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.as7-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.as7-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.as7-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# Solutions Section 1 – Hero
--------------------------------------------------------------*/
.solutions-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.ss1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.ss1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Heading */
.ss1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Subtext */
.ss1-subtext {
	margin: 0 0 36px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Solutions Section 2 – Automate Your HR
--------------------------------------------------------------*/
.solutions-section2 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.ss2-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column – Image */
.ss2-left {
	flex: 0 0 42%;
	max-width: 42%;
}


.ss2-image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: #f0f0eb;
}

.ss2-image {
	display: block;
	width: 100%;
	height: auto;
}

/* Right Column */
.ss2-right {
	flex: 1;
	min-width: 0;
}


.ss2-heading {
	margin: 0 0 20px;
	letter-spacing: -0.4px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss2-heading-highlight {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.ss2-text {
	margin-bottom: 28px;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss2-text p {
	margin: 0 0 12px;
}

.ss2-text p:last-child {
	margin-bottom: 0;
}

/* Feature list */
.ss2-feature-list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px 24px;
}

.ss2-feature-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.ss2-check-icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ss2-feature-item span {
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/* Stats box */
.ss2-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	padding: 28px 32px;
	border-radius: 16px;
	background: #f5f5f5;
}

.ss2-stat {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ss2-stat-label {
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 1;
}

.ss2-stat-value {
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.2;
}

/*--------------------------------------------------------------
# Solutions Section 3 – Simplify Payroll
--------------------------------------------------------------*/
.solutions-section3 {
	background: linear-gradient(90deg, #067D7D 0%, #BFE9EC 100%);
	padding: 100px 0;
	overflow: hidden;
}

.ss3-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.ss3-left {
	flex: 1;
	min-width: 0;
}


.ss3-heading {
	margin: 0 0 20px;
	letter-spacing: -0.4px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss3-heading-light {
	color: #ffffff;
}

.ss3-heading-dark {
	color: #002b2b;
}

.ss3-text {
	margin-bottom: 32px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss3-text p {
	margin: 0 0 12px;
}

.ss3-text p:last-child {
	margin-bottom: 0;
}

/* Cards grid */
.ss3-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

.ss3-card {
	padding: 24px 24px 28px;
	border-radius: 16px;
	background: #f1f3f2;
	cursor: default;
}


.ss3-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ss3-card:nth-child(2) {
	transition-delay: 0.12s;
}

.ss3-card:nth-child(3) {
	transition-delay: 0.19s;
}

.ss3-card:nth-child(4) {
	transition-delay: 0.26s;
}

.ss3-card.ss3-visible:hover {
	translate: 0 -4px;
	box-shadow: 0 12px 32px rgba(0, 43, 43, 0.18);
}

.ss3-card-icon {
	display: flex;
	align-items: center;
	margin-bottom: 28px;
}

.ss3-card-icon svg,
.ss3-card-icon img {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ss3-card-title {
	margin: 0;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Right Column */
.ss3-right {
	flex: 0 0 46%;
	max-width: 46%;
}


.ss3-image-wrap {
	border-radius: 20px;
	overflow: hidden;
	background: #f0f0eb;
}

.ss3-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Solutions Section 4 – Workforce Insights
--------------------------------------------------------------*/
.solutions-section4 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

/* Header */
.ss4-header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 56px;
}

.ss4-heading {
	margin: 0 0 16px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss4-heading-highlight {
	color: #1469BA;
}

.ss4-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Cards grid */
.ss4-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}

.ss4-card {
	padding: 36px 32px 40px;
	border-radius: 24px;
	background: #f5f5f5;
	cursor: default;
}


.ss4-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ss4-card:nth-child(2) {
	transition-delay: 0.15s;
}

.ss4-card:nth-child(3) {
	transition-delay: 0.25s;
}

.ss4-card.ss4-visible:hover {
	translate: 0 -6px;
	box-shadow: 0 16px 40px rgba(20, 105, 186, 0.12);
}

.ss4-card-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	border-radius: 14px;
	background: #BEF2F8;
}

.ss4-card-icon svg,
.ss4-card-icon img {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.ss4-card-title {
	margin: 0 0 14px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss4-card-text {
	margin: 0 0 22px;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss4-card-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ss4-card-points li {
	position: relative;
	padding-left: 20px;
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

.ss4-card-points li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #067D7D;
}

/*--------------------------------------------------------------
# Solutions Section 5 – Engaged Workforce
--------------------------------------------------------------*/
.solutions-section5 {
	background: linear-gradient(135deg, #003D3D 0%, #0a5c5c 100%);
	padding: 100px 0;
	overflow: hidden;
}

.ss5-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column – Staggered cards */
.ss5-left {
	flex: 0 0 52%;
	max-width: 52%;
	display: flex;
	gap: 24px;
}

.ss5-card-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ss5-card-col-2 {
	margin-top: 56px;
}

.ss5-card {
	padding: 28px 28px 32px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.08);
}


.ss5-card:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ss5-card-col-1 .ss5-card:nth-child(1) {
	transition-delay: 0.05s;
}

.ss5-card-col-2 .ss5-card:nth-child(1) {
	transition-delay: 0.12s;
}

.ss5-card-col-1 .ss5-card:nth-child(2) {
	transition-delay: 0.19s;
}

.ss5-card-col-2 .ss5-card:nth-child(2) {
	transition-delay: 0.26s;
}

.ss5-card-icon {
	display: flex;
	align-items: center;
	margin-bottom: 18px;
}

.ss5-card-icon svg,
.ss5-card-icon img {
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.ss5-card-title {
	margin: 0 0 10px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss5-card-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

/* Right Column */
.ss5-right {
	flex: 1;
	min-width: 0;
}


.ss5-heading {
	margin: 0 0 20px;
	letter-spacing: -0.4px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 40px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss5-text {
	margin-bottom: 32px;
	color: rgba(255, 255, 255, 0.8);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss5-text p {
	margin: 0;
}

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

.ss5-feature {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ss5-feature-icon {
	width: 48px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 50%;
	background: #BEF2F8;
}

.ss5-feature-icon svg,
.ss5-feature-icon img {
	display: block;
	width: 22px;
	height: 22px;
}

.ss5-feature-label {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/*--------------------------------------------------------------
# Solutions Section 6 – CTA Banner
--------------------------------------------------------------*/
.solutions-section6 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.ss6-banner {
	background: linear-gradient(90deg, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


/* Decorative circles */
.ss6-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.ss6-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.ss6-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

/* Content */
.ss6-content {
	position: relative;
	z-index: 1;
}

.ss6-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.ss6-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss6-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.ss6-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.ss6-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.ss6-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.ss6-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.ss6-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# Services Section 1 – Hero
--------------------------------------------------------------*/
.services-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.srs1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.srs1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Heading */
.srs1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Subtext */
.srs1-subtext {
	margin: 0 0 36px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Services Section 2 – Comprehensive HR Services (Bento)
--------------------------------------------------------------*/
.services-section2 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

/* Header */
.srs2-header {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 48px;
}

.srs2-heading {
	margin: 0 0 16px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs2-heading-highlight {
	color: #1469BA;
}

.srs2-subtext {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Bento grid */
.srs2-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.srs2-card {
	border-radius: 24px;
	overflow: hidden;
}


.srs2-card:nth-child(1) {
	transition-delay: 0.05s;
}

.srs2-card:nth-child(2) {
	transition-delay: 0.10s;
}

.srs2-card:nth-child(3) {
	transition-delay: 0.15s;
}

.srs2-card:nth-child(4) {
	transition-delay: 0.20s;
}

.srs2-card:nth-child(5) {
	transition-delay: 0.25s;
}

.srs2-card:nth-child(6) {
	transition-delay: 0.30s;
}

/* Column spans */
.srs2-text-card:nth-child(1) {
	grid-column: span 4;
}

.srs2-image-card-1 {
	grid-column: span 4;
}

.srs2-text-card:nth-child(3) {
	grid-column: span 4;
}

.srs2-text-card:nth-child(4) {
	grid-column: span 4;
}

.srs2-text-card:nth-child(5) {
	grid-column: span 5;
}

.srs2-image-card-2 {
	grid-column: span 3;
}

/* Text card */
.srs2-text-card {
	background: #f5f5f5;
	padding: 36px 36px 40px;
	display: flex;
	flex-direction: column;
	cursor: default;
}

.srs2-text-card.srs2-visible:hover {
	translate: 0 -4px;
	box-shadow: 0 16px 40px rgba(0, 64, 64, 0.10);
}

.srs2-card-icon {
	display: flex;
	align-items: center;
	margin-bottom: 28px;
}

.srs2-card-icon svg,
.srs2-card-icon img {
	display: block;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.srs2-card-title {
	margin: 0 0 14px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs2-card-text {
	margin: 0 0 24px;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
	flex: 1;
}

.srs2-card-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	text-decoration: none;
	color: #067D7D;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
	transition: gap 0.25s ease;
}

.srs2-card-link:hover {
	gap: 14px;
}

.srs2-arrow {
	flex-shrink: 0;
}

/* Image card */
.srs2-image-card {
	background: #f0f0eb;
	min-height: 320px;
}

.srs2-image-card img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
}

/*--------------------------------------------------------------
# Services Section 3 – Process Steps
--------------------------------------------------------------*/
.services-section3 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

/* Header */
.srs3-header {
	text-align: center;
	margin-bottom: 56px;
}

.srs3-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 20px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.srs3-heading {
	margin: 0;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs3-heading-highlight {
	color: #1469BA;
}

/* Steps */
.srs3-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
}

.srs3-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 20px;
}


.srs3-step:nth-child(1) {
	transition-delay: 0.05s;
}

.srs3-step:nth-child(2) {
	transition-delay: 0.15s;
}

.srs3-step:nth-child(3) {
	transition-delay: 0.25s;
}

.srs3-step:nth-child(4) {
	transition-delay: 0.35s;
}

.srs3-step-circle {
	width: 80px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	flex-shrink: 0;
	border-radius: 9999px;
	background: linear-gradient(135deg, #13B3C3 0%, #1469BA 100%);
	box-shadow: 0 8px 24px rgba(19, 179, 195, 0.25);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.srs3-step:hover .srs3-step-circle {
	transform: translateY(-4px);
	box-shadow: 0 12px 30px rgba(19, 179, 195, 0.4);
}

.srs3-step-num {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}

.srs3-step-title {
	margin: 0 0 12px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs3-step-desc {
	margin: 0;
	color: #4C4C4C;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Services Section 4 – Why Businesses Trust FHR
--------------------------------------------------------------*/
.services-section4 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.srs4-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.srs4-left {
	flex: 0 0 46%;
	max-width: 46%;
}


.srs4-heading {
	margin: 0 0 28px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs4-heading-highlight {
	background: linear-gradient(90deg, #1469BA 0%, #13B3C3 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Feature list */
.srs4-features {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.srs4-feature-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	border-radius: 16px;
	background: linear-gradient(90deg, #55AAAA 0%, #AAD5D5 100%);
	box-shadow: 0 4px 20px 0 rgba(16, 79, 80, 0.05);
	cursor: default;
}


.srs4-feature-item:nth-child(1) {
	transition-delay: 0.10s;
}

.srs4-feature-item:nth-child(2) {
	transition-delay: 0.18s;
}

.srs4-feature-item:nth-child(3) {
	transition-delay: 0.26s;
}

.srs4-feature-item:nth-child(4) {
	transition-delay: 0.34s;
}

.srs4-feature-item.srs4-visible:hover {
	translate: 4px 0;
	box-shadow: 0 8px 28px 0 rgba(16, 79, 80, 0.18);
}

.srs4-feature-item.srs4-visible:hover .srs4-feature-icon {
	background: #004040;
	transition: background 0.35s ease;
}

.srs4-feature-item.srs4-visible:hover .srs4-feature-icon svg path {
	fill: #BEF2F8;
	transition: fill 0.35s ease;
}

.srs4-feature-icon {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	border-radius: 12px;
	background: #BEF2F8;
	padding: 11px;
}

.srs4-feature-icon svg,
.srs4-feature-icon img {
	display: block;
	width: 22px;
	height: 22px;
}

.srs4-feature-body {
	flex: 1;
	min-width: 0;
}

.srs4-feature-title {
	margin: 0 0 2px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs4-feature-desc {
	margin: 0;
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/* Right Column */
.srs4-right {
	flex: 1;
	min-width: 0;
}


.srs4-image-wrap {
	border-radius: 24px;
	overflow: hidden;
	background: #f0f0eb;
}

.srs4-image {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Services Section 5 – FAQ
--------------------------------------------------------------*/
.services-section5 {
	padding: 90px 0 100px;
	overflow: hidden;
	background: linear-gradient(135deg, #0a3d35 0%, #1a7a6a 100%);
}

/* Header */
.srs5-header {
	text-align: center;
	margin-bottom: 52px;
}

.srs5-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.9);
	padding: 6px 20px;
	border-radius: 50px;
	margin-bottom: 20px;
	color: #1469ba;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.srs5-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs5-subtext {
	margin: 0;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.srs5-subtext p {
	margin: 0;
}

/* Accordion */
.srs5-accordion {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.srs5-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	overflow: hidden;
	transition: background 0.2s ease;
}


.srs5-item:nth-child(1) {
	transition-delay: 0.05s;
}

.srs5-item:nth-child(2) {
	transition-delay: 0.10s;
}

.srs5-item:nth-child(3) {
	transition-delay: 0.15s;
}

.srs5-item:nth-child(4) {
	transition-delay: 0.20s;
}

.srs5-item:nth-child(5) {
	transition-delay: 0.25s;
}

.srs5-item:hover {
	background: rgba(255, 255, 255, 0.14);
}

.srs5-item-open {
	background: rgba(255, 255, 255, 0.14);
}

.srs5-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	background: transparent;
	border: none;
	cursor: pointer;
	text-align: left;
}

.srs5-question span {
	flex: 1;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs5-chevron {
	flex-shrink: 0;
	transition: transform 0.3s ease;
}

.srs5-answer {
	padding: 0 28px 24px;
}

.srs5-answer p,
.srs5-answer div {
	margin: 0;
	color: #e2e2e2;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Services Section 6 – CTA Banner
--------------------------------------------------------------*/
.services-section6 {
	background: #ffffff;
	padding: 60px 0 80px;
	overflow: hidden;
}

.srs6-banner {
	background: linear-gradient(90deg, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


/* Decorative circles */
.srs6-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.srs6-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.srs6-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

/* Content */
.srs6-content {
	position: relative;
	z-index: 1;
}

.srs6-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.srs6-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.srs6-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.srs6-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.srs6-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.srs6-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.srs6-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.srs6-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# Careers Section 1 – Hero
--------------------------------------------------------------*/
.careers-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.cs1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Badge */
.cs1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Heading */
.cs1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Subtext */
.cs1-subtext {
	margin: 0 0 36px;
	max-width: 920px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/* Buttons */
.cs1-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.cs1-btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	white-space: nowrap;
	cursor: pointer;
	text-align: center;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cs1-btn-solid {
	background: #ffffff;
	color: #004040;
	border: 2px solid #ffffff;
}

.cs1-btn-solid:hover {
	background: #e8f2fb;
	color: #004040;
	border: 2px solid #e8f2fb;
}

.cs1-btn-outline {
	border: 2px solid #ffffff;
	background: transparent;
	color: #ffffff;
}

.cs1-btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# Careers Section 2 – Why Choose a Career at FHR
--------------------------------------------------------------*/
.careers-section2 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

/* Header */
.cr2-header {
	text-align: center;
	margin-bottom: 56px;
}

.cr2-heading {
	margin: 0 0 16px;
	color: #000000;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr2-heading-line {
	display: block;
	margin: 0 auto;
	border-radius: 9999px;
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	width: 80px;
	height: 6px;
}

/* Cards */
.cr2-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 28px;
}

.cr2-card {
	padding: 36px 32px 40px;
	border-radius: 24px;
	background: #f5f5f5;
	cursor: default;
}


.cr2-card:nth-child(1) {
	transition-delay: 0.05s;
}

.cr2-card:nth-child(2) {
	transition-delay: 0.13s;
}

.cr2-card:nth-child(3) {
	transition-delay: 0.21s;
}

.cr2-card:nth-child(4) {
	transition-delay: 0.29s;
}

.cr2-card.cr2-visible:hover {
	translate: 0 -6px;
	box-shadow: 0 16px 40px rgba(20, 105, 186, 0.12);
}

.cr2-card-icon {
	width: 56px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 28px;
	border-radius: 14px;
	background: #BEF2F8;
}

.cr2-card-icon svg,
.cr2-card-icon img {
	display: block;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
}

.cr2-card-title {
	margin: 0 0 14px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr2-card-text {
	margin: 0;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# Careers Section 3 – Life at Factor Human
--------------------------------------------------------------*/
.careers-section3 {
	background: linear-gradient(90deg, #2a9d9d 0%, #7fd4dd 100%);
	padding: 100px 0;
	overflow: hidden;
}

.cr3-inner {
	display: flex;
	align-items: center;
	gap: 60px;
}

/* Left Column */
.cr3-left {
	flex: 0 0 42%;
	max-width: 42%;
}


.cr3-badge {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: #d7f6f9;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cr3-heading {
	margin: 0 0 20px;
	letter-spacing: -0.4px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr3-heading-light {
	color: #ffffff;
}

.cr3-heading-dark {
	color: #002b2b;
}

.cr3-text {
	margin-bottom: 28px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cr3-text p {
	margin: 0 0 12px;
}

.cr3-text p:last-child {
	margin-bottom: 0;
}

/* Feature list */
.cr3-feature-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 22px 24px;
}

.cr3-feature-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.cr3-check {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	margin-top: 1px;
}

.cr3-feature-item span {
	color: #052e2e;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/* Right Column – Image collage */
.cr3-right {
	flex: 1;
	min-width: 0;
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 20px;
}


.cr3-img {
	border-radius: 14px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.2);
}

.cr3-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cr3-img-1 {
	grid-column: 1 / -1;
	height: 320px;
}

.cr3-img-2,
.cr3-img-3 {
	height: 260px;
}

/*--------------------------------------------------------------
# Careers Section 4 – Our Hiring Process
--------------------------------------------------------------*/
.careers-section4 {
	background: #ffffff;
	padding-top: 100px;
}

.cr4-header {
	text-align: center;
	margin-bottom: 64px;
}

.cr4-heading {
	margin: 0 0 16px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}

.cr4-heading-line {
	display: block;
	width: 56px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(90deg, #2a9d9d 0%, #7fd4dd 100%);
	margin: 0 auto;
}

/* Steps row */
.cr4-steps {
	display: flex;
	align-items: flex-start;
	gap: 0;
	position: relative;
}

/* Connector line between circles */
.cr4-steps::before {
	content: '';
	position: absolute;
	top: 38px;
	left: calc(12.5% + 38px);
	right: calc(12.5% + 38px);
	height: 2px;
	background: #e0f4f6;
	z-index: 0;
}

.cr4-step {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	position: relative;
	z-index: 1;
}


.cr4-step:nth-child(1) {
	transition-delay: 0s;
}

.cr4-step:nth-child(2) {
	transition-delay: 0.12s;
}

.cr4-step:nth-child(3) {
	transition-delay: 0.24s;
}

.cr4-step:nth-child(4) {
	transition-delay: 0.36s;
}

.cr4-step-circle {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: linear-gradient(135deg, #5ecfdc 0%, #2ab8c8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	flex-shrink: 0;
}

.cr4-step:nth-child(1) .cr4-step-circle {
	background: linear-gradient(135deg, #6dd8e4 0%, #2ec4d4 100%);
}

.cr4-step:nth-child(2) .cr4-step-circle {
	background: linear-gradient(135deg, #2bbfce 0%, #1aa8b8 100%);
}

.cr4-step:nth-child(3) .cr4-step-circle {
	background: linear-gradient(135deg, #1aa0af 0%, #0e8a99 100%);
}

.cr4-step:nth-child(4) .cr4-step-circle {
	background: linear-gradient(135deg, #0e8090 0%, #056878 100%);
}

.cr4-step-num {
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}

.cr4-step-title {
	margin: 0 0 12px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr4-step-desc {
	margin: 0;
	color: #4a5568;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.careers-section4 {
		padding: 72px 0;
	}

	.cr4-heading {
		font-size: 28px;
	}

	.cr4-steps {
		flex-wrap: wrap;
		gap: 40px 0;
	}

	.cr4-steps::before {
		display: none;
	}

	.cr4-step {
		flex: 0 0 50%;
		max-width: 50%;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.careers-section4 {
		padding: 60px 0;
	}

	.cr4-heading {
		font-size: 24px;
	}

	.cr4-header {
		margin-bottom: 48px;
	}

	.cr4-step {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.cr4-step-circle {
		width: 64px;
		height: 64px;
	}

	.cr4-step-num {
		font-size: 24px;
	}
}

/*--------------------------------------------------------------
# Careers Section 5 – Current Opportunities
--------------------------------------------------------------*/
.careers-section5 {
	background: #ffffff;
	padding-top: 100px;
}

/* Top bar */
.cr5-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 48px;
}

.cr5-top-left {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cr5-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	border-radius: 100px;
	background: #d7f6f9;
	color: #067d7d;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 24px;
	width: fit-content;
}

.cr5-heading {
	margin: 0;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
}

.cr5-viewall {
	display: inline-flex;
	align-items: center;
	padding: 10px 28px;
	border-radius: 100px;
	border: 2px solid #2a9d9d;
	color: #067d7d;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.22s ease, color 0.22s ease;
	flex-shrink: 0;
}

.cr5-viewall:hover {
	background: #2a9d9d;
	color: #ffffff;
	border: 2px solid #2a9d9d;
}

/* 2-column card grid */
.cr5-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* Card */
.cr5-card {
	border-radius: 18px;
	overflow: hidden;
}


.cr5-card:nth-child(1) {
	transition-delay: 0s;
}

.cr5-card:nth-child(2) {
	transition-delay: 0.1s;
}

.cr5-card:nth-child(3) {
	transition-delay: 0.2s;
}

.cr5-card:nth-child(4) {
	transition-delay: 0.3s;
}

.cr5-card-inner {
	height: 100%;
	padding: 32px 36px;
	background: linear-gradient(135deg, #7ecece 0%, #2a8a8a 100%);
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cr5-card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.cr5-card-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
	min-width: 0;
}

.cr5-card-title {
	margin: 0;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr5-card-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.cr5-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 22px;
}

.cr5-meta-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: #ffffff;
}

.cr5-apply {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #0d1b2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity 0.2s ease;
}

.cr5-apply:hover {
	opacity: 0.75;
}

.cr5-card-desc {
	margin: 0;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.careers-section5 {
		padding: 72px 0;
	}

	.cr5-heading {
		font-size: 28px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 680px) {
	.careers-section5 {
		padding: 60px 0;
	}

	.cr5-top {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		margin-bottom: 36px;
	}

	.cr5-heading {
		font-size: 24px;
	}

	.cr5-grid {
		grid-template-columns: 1fr;
	}

	.cr5-card-top {
		flex-direction: column;
		gap: 14px;
	}

	.cr5-apply {
		align-self: flex-start;
	}

	.cr5-card-inner {
		padding: 24px 24px;
	}
}

/*--------------------------------------------------------------
# Careers Section 6 – CTA Banner
--------------------------------------------------------------*/
.careers-section6 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.cr6-banner {
	background: linear-gradient(90deg, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


.cr6-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.cr6-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.cr6-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

.cr6-content {
	position: relative;
	z-index: 1;
}

.cr6-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cr6-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cr6-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.cr6-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cr6-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.cr6-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.cr6-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.cr6-btn-outline:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/*--------------------------------------------------------------
# Careers – Open Positions Section (Expandable)
--------------------------------------------------------------*/
.careers-positions {
	background: linear-gradient(135deg, #003D3D 0%, #0a5c5c 100%);
	padding: 80px 0;
	overflow: hidden;
}

.cs2-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 36px;
}

.cs2-heading {
	margin: 0 0 8px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cs2-subtext {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.cs2-close {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.cs2-close:hover {
	background: rgba(255, 255, 255, 0.22);
	transform: rotate(90deg);
}

/* Positions list */
.cs2-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cs2-position {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 28px 32px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: background 0.25s ease, transform 0.25s ease;
}

.cs2-position:hover {
	background: rgba(255, 255, 255, 0.12);
	transform: translateY(-2px);
}

.cs2-position-info {
	flex: 1;
	min-width: 0;
}

.cs2-position-title {
	margin: 0 0 12px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.cs2-position-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.cs2-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: 100px;
	background: #ffffff;
	color: #067D7D;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	font-weight: 700;
	line-height: 20px;
}

.cs2-tag svg {
	flex-shrink: 0;
}

.cs2-tag-dept {
	background: #BEF2F8;
	color: #004040;
}

.cs2-position-desc {
	margin: 0;
	max-width: 720px;
	color: rgba(255, 255, 255, 0.78);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

.cs2-position-action {
	flex-shrink: 0;
}

.cs2-apply-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 26px;
	border-radius: 50px;
	text-decoration: none;
	background: #ffffff;
	color: #004040;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	transition: background 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

.cs2-apply-btn:hover {
	background: #BEF2F8;
	color: #004040;
	gap: 14px;
}

/*--------------------------------------------------------------
# Careers – Job Application Section (Expandable)
--------------------------------------------------------------*/
.careers-apply {
	background: #f4f6f8;
	padding: 80px 0;
	overflow: hidden;
}

.apply-dialog {
	position: relative;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	background: #ffffff;
	border-radius: 24px;
	padding: 48px;
	box-shadow: 0 20px 60px rgba(0, 32, 32, 0.10);
}

.apply-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: 50%;
	background: #f1f3f2;
	cursor: pointer;
	transition: background 0.25s ease, transform 0.25s ease;
}

.apply-close:hover {
	background: #e2e8e7;
	transform: rotate(90deg);
}

.apply-head {
	margin-bottom: 28px;
	padding-right: 40px;
}

.apply-title {
	margin: 0 0 8px;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.apply-subtitle {
	margin: 0;
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
}

/* Form */
.apply-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

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

.apply-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.apply-field label {
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: 700;
	line-height: 1.4;
}

.apply-field label span {
	color: #d33;
}

.apply-field label em {
	color: #8a8a8a;
	font-style: normal;
	font-weight: 400;
}

.apply-field input,
.apply-field select,
.apply-field textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid #dde4e3;
	border-radius: 12px;
	background: #f8faf9;
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 24px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
}

.apply-field textarea {
	resize: vertical;
	min-height: 96px;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
	outline: none;
	border-color: #13B3C3;
	box-shadow: 0 0 0 3px rgba(19, 179, 195, 0.15);
}

/* File upload */
.apply-file {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1.5px dashed #b9d4d2;
	border-radius: 12px;
	background: #f3faf9;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.apply-file:hover {
	border-color: #13B3C3;
	background: #ecf8f7;
}

.apply-file svg {
	flex-shrink: 0;
}

.apply-file-text {
	color: #4C4C4C;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 400;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.apply-file.has-file .apply-file-text {
	color: #067D7D;
	font-weight: 700;
}

.apply-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

/* Actions */
.apply-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 15px;
}

.apply-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 28px;
	border-radius: 50px;
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.apply-btn-ghost {
	background: transparent;
	color: #4C4C4C;
	border-color: #dde4e3;
}

.apply-btn-ghost:hover {
	background: #f1f3f2;
	color: #000000;
}

.apply-btn-solid {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	color: #ffffff;
}

.apply-btn-solid:hover {
	opacity: 0.92;
}

.apply-btn-solid.is-loading {
	opacity: 0.7;
	pointer-events: none;
}

/* Feedback */
.apply-feedback {
	margin-top: 4px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 22px;
	display: none;
}

.apply-feedback.is-error {
	display: block;
	color: #c0392b;
}

.apply-feedback.is-success {
	display: block;
	color: #0a7d5a;
}

/*========================================================*/
/*          Responsive – All Breakpoints                  */
/*========================================================*/
@media only screen and (max-width: 1680px) {

	.ps1-badge,
	.ps2-label,
	.ps9-badge,
	.ps10-badge,
	.ps11-badge {
		font-size: 14px;
	}

	.ps1-heading {
		font-size: 40px;
		line-height: 1.2;
	}

	.ps1-subtext,
	.ps3-card-desc {
		font-size: 15px;
	}

	.ps1-btn,
	.ps4-btn,
	.ps10-card-btn,
	.ps12-btn {
		font-size: 14px;
	}

	.ps2-heading,
	.ps2-heading-highlight,
	.ps4-headingm,
	.ps6-heading,
	.ps8-heading,
	.ps8-heading-highlight,
	.ps9-heading,
	.ps9-heading-highlight,
	.ps10-heading,
	.ps10-heading-highlight,
	.ps11-heading,
	.ps12-heading {
		font-size: 35px;
	}

	.ps3-heading,
	.ps5-heading,
	.ps7-heading {
		font-size: 30px;
	}

	.ps3-subtext,
	.ps4-text,
	.ps5-step-desc,
	.ps6-text,
	.ps7-subtext,
	.ps7-card-desc,
	.ps8-text,
	.ps9-subtext,
	.ps10-subtext,
	.ps10-card-billing,
	.ps10-feature-text,
	.ps11-subtext,
	.ps11-answer p,
	.ps11-answer div,
	.ps12-subtext {
		font-size: 15px;
	}

	.ps5-step-title,
	.ps6-label,
	.ps10-card-name {
		font-size: 18px;
	}

	.ps10-price-amount {
		font-size: 40px;
	}




}

@media only screen and (max-width: 1520px) {}

@media only screen and (max-width: 1490px) {}

@media only screen and (max-width: 1366px) {}



/*--------------------------------------------------------------
# max-width: 1280px
--------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {

	.ps1-heading,
	.ps1-heading span {
		font-size: 48px;
	}

	.ps2-heading,
	.ps2-heading-highlight {
		font-size: 32px;
	}
}

@media only screen and (max-width: 1200px) {}

/*--------------------------------------------------------------
# max-width: 1100px
--------------------------------------------------------------*/
@media only screen and (max-width: 1100px) {
	.ps2-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ps2-heading,
	.ps2-heading-highlight {
		font-size: 30px;
	}

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

	.ps4-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ps4-heading {
		font-size: 34px;
	}

	.ps6-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ps6-heading {
		font-size: 30px;
	}

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

	.ps8-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ps8-heading,
	.ps8-heading-highlight {
		font-size: 30px;
	}

	.ps10-heading,
	.ps10-heading-highlight {
		font-size: 36px;
	}

	.ps10-price-amount {
		font-size: 48px;
	}
}

/*--------------------------------------------------------------
# max-width: 1024px
--------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {
	.platform-section1 {
		padding: 160px 0 0;
	}

	.ps1-heading,
	.ps1-heading span {
		font-size: 42px;
	}
}

/*--------------------------------------------------------------
# max-width: 900px
--------------------------------------------------------------*/
@media only screen and (max-width: 900px) {
	.platform-section2 {
		padding: 72px 0;
	}

	.ps2-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ps2-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.ps2-image-wrap {
		transform: translateY(30px);
	}


	.ps2-right {
		width: 100%;
	}

	.platform-section3 {
		padding: 72px 0;
	}

	.ps3-heading {
		font-size: 34px;
	}

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

	.ps3-header {
		margin-bottom: 40px;
	}

	.platform-section4 {
		padding: 72px 0;
	}

	.ps4-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ps4-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.ps4-right {
		width: 100%;
		transform: translateY(30px);
	}


	.ps4-image-wrap {
		margin: 0;
	}

	.platform-section5 {
		padding: 72px 0;
	}

	.ps5-steps::before {
		display: none;
	}

	.ps5-steps {
		flex-wrap: wrap;
		gap: 40px 0;
	}

	.ps5-step {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.platform-section6 {
		padding: 72px 0;
	}

	.ps6-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ps6-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.ps6-right {
		width: 100%;
		transform: translateY(30px);
	}


	.ps6-image-wrap {
		margin: 0;
	}

	.platform-section7 {
		padding: 72px 0;
	}

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

	.ps7-header {
		margin-bottom: 40px;
	}

	.platform-section8 {
		padding: 72px 0;
	}

	.ps8-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ps8-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.ps8-right {
		width: 100%;
		transform: translateY(30px);
	}


	.platform-section10 {
		padding: 72px 0;
	}

	.ps10-cards {
		grid-template-columns: 1fr;
		max-width: 480px;
		margin: 0 auto;
		gap: 24px;
	}

	.ps10-card-featured {
		padding: 36px 32px 40px;
	}

	.ps10-header {
		margin-bottom: 40px;
	}

	.ps10-card:nth-child(1),
	.ps10-card:nth-child(2),
	.ps10-card:nth-child(3) {
		transition-delay: 0.05s;
	}

	.platform-section11 {
		padding: 72px 0 80px;
	}

	.ps11-header {
		margin-bottom: 40px;
	}

	.platform-section12 {
		padding: 48px 0 64px;
	}

	.ps12-banner {
		padding: 56px 36px;
	}

	.ps12-heading {
		font-size: 30px;
	}
}

/*--------------------------------------------------------------
# max-width: 768px
--------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
	.platform-section1 {
		padding: 140px 0 0;
	}

	.ps1-heading,
	.ps1-heading span {
		font-size: 34px;
	}

	.ps1-subtext {
		font-size: 15px;
		line-height: 26px;
	}

	.ps1-btns {
		margin-bottom: 40px;
	}

	.ps2-heading,
	.ps2-heading-highlight {
		font-size: 30px;
	}

	.ps2-text {
		font-size: 15px;
		line-height: 26px;
	}

	.ps4-heading {
		font-size: 28px;
	}

	.ps4-text {
		font-size: 15px;
	}

	.ps6-heading {
		font-size: 26px;
	}

	.ps6-text {
		font-size: 15px;
	}

	.ps8-heading,
	.ps8-heading-highlight {
		font-size: 26px;
	}

	.platform-section9 {
		padding: 72px 0;
	}

	.ps9-heading,
	.ps9-heading-highlight {
		font-size: 28px;
	}

	.ps9-card {
		width: 280px;
		padding: 22px 20px;
	}

	.ps9-header {
		margin-bottom: 40px;
	}

	.ps10-heading,
	.ps10-heading-highlight {
		font-size: 30px;
	}

	.ps10-subtext {
		font-size: 15px;
	}

	.ps11-heading {
		font-size: 28px;
	}

	.ps11-question {
		padding: 20px 22px;
	}

	.ps11-answer {
		padding: 0 22px 20px;
	}

	.ps12-heading {
		font-size: 26px;
	}

	.ps12-banner {
		padding: 48px 28px;
		border-radius: 20px;
	}
}

@media only screen and (max-width: 767px) {}

/*--------------------------------------------------------------
# max-width: 600px
--------------------------------------------------------------*/
@media only screen and (max-width: 600px) {
	.platform-section1 .container {
		padding: 0 16px;
	}

	.platform-section1 {
		padding: 120px 0 0;
	}

	.ps1-badge {
		font-size: 12px;
		padding: 6px 14px;
	}

	.ps1-heading,
	.ps1-heading span {
		font-size: 28px;
		line-height: 140%;
	}

	.ps1-subtext {
		font-size: 14px;
		line-height: 24px;
	}

	.ps1-btn {
		font-size: 14px;
		padding: 10px 22px;
	}

	.ps1-btns {
		gap: 12px;
		margin-bottom: 32px;
	}

	.platform-section2 {
		padding: 56px 0;
	}

	.ps2-inner {
		gap: 32px;
	}

	.ps2-heading,
	.ps2-heading-highlight {
		font-size: 26px;
	}

	.ps2-label {
		font-size: 13px;
		padding: 6px 14px;
	}

	.ps2-text {
		font-size: 14px;
		line-height: 24px;
	}

	.platform-section3 {
		padding: 56px 0;
	}

	.ps3-heading {
		font-size: 28px;
	}

	.ps3-subtext {
		font-size: 14px;
	}

	.ps3-grid {
		gap: 16px;
	}

	.ps3-card {
		padding: 22px 18px 24px;
	}

	.platform-section4 {
		padding: 56px 0;
	}

	.ps4-heading {
		font-size: 24px;
	}

	.ps4-text {
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 28px;
	}

	.ps4-btn {
		font-size: 14px;
		padding: 10px 22px;
	}

	.platform-section5 {
		padding: 56px 0;
	}

	.ps5-heading {
		font-size: 26px;
	}

	.ps5-header {
		margin-bottom: 40px;
	}

	.ps5-step {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.ps5-step-circle {
		width: 64px;
		height: 64px;
	}

	.ps5-step-num {
		font-size: 22px;
	}

	.platform-section6 {
		padding: 56px 0;
	}

	.ps6-heading {
		font-size: 22px;
	}

	.ps6-text {
		font-size: 14px;
		line-height: 24px;
	}

	.platform-section7 {
		padding: 56px 0;
	}

	.ps7-heading {
		font-size: 26px;
	}

	.ps7-subtext {
		font-size: 15px;
	}

	.ps7-grid {
		gap: 16px;
	}

	.ps7-card {
		padding: 22px 18px 24px;
	}

	.platform-section8 {
		padding: 56px 0;
	}

	.ps8-heading,
	.ps8-heading-highlight {
		font-size: 22px;
	}

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

	.ps8-feature-icon {
		width: 38px;
		height: 38px;
	}

	.platform-section9 {
		padding: 56px 0;
	}

	.ps9-heading,
	.ps9-heading-highlight {
		font-size: 24px;
	}

	.ps9-card {
		width: 260px;
	}

	.ps9-slider-wrap::before,
	.ps9-slider-wrap::after {
		width: 60px;
	}

	.platform-section10 {
		padding: 56px 0;
	}

	.ps10-heading,
	.ps10-heading-highlight {
		font-size: 26px;
	}

	.ps10-cards {
		max-width: 100%;
	}

	.ps10-card {
		padding: 28px 24px 32px;
	}

	.ps10-price-amount {
		font-size: 44px;
	}

	.ps10-card-btn {
		font-size: 15px;
		padding: 12px 20px;
	}

	.platform-section11 {
		padding: 56px 0 64px;
	}

	.ps11-heading {
		font-size: 24px;
	}

	.ps11-subtext {
		font-size: 15px;
	}

	.ps11-question {
		padding: 18px 18px;
	}

	.ps11-question span {
		font-size: 15px;
	}

	.ps11-answer {
		padding: 0 18px 18px;
	}

	.ps11-answer p,
	.ps11-answer div {
		font-size: 15px;
		line-height: 26px;
	}

	.platform-section12 {
		padding: 40px 0 56px;
	}

	.ps12-banner {
		padding: 40px 20px;
		border-radius: 16px;
	}

	.ps12-heading {
		font-size: 22px;
	}

	.ps12-subtext {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.ps12-btn {
		font-size: 15px;
		padding: 9px 20px;
	}

	.ps12-deco-bl {
		width: 140px;
		height: 140px;
		bottom: -50px;
		left: -40px;
	}

	.ps12-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}
}

@media only screen and (max-width: 500px) {
	.ps3-grid {
		grid-template-columns: 1fr;
	}

	.ps7-grid {
		grid-template-columns: 1fr;
	}

	.ps1-btns,
	.cs1-btns {
		flex-direction: column;
		align-items: center;
	}

	.ps1-btn,
	.cs1-btn {
		width: 100%;
		text-align: center;
	}
}

/*--------------------------------------------------------------
# max-width: 480px
--------------------------------------------------------------*/
@media only screen and (max-width: 480px) {}

/*--------------------------------------------------------------
# max-width: 400px
--------------------------------------------------------------*/
@media only screen and (max-width: 400px) {}


@media only screen and (max-width: 375px) {}

@media only screen and (max-width: 360px) {}

/*========================================================*/
/*          About Page – Responsive                       */
/*========================================================*/
@media only screen and (max-width: 1680px) {

	.as1-badge,
	.ss1-badge,
	.srs1-badge,
	.cs1-badge,
	.rrs1-badge,
	.gs1-badge {
		font-size: 14px;
	}

	.as1-heading,
	.ss1-heading,
	.srs1-heading,
	.cs1-heading,
	.rrs1-heading,
	.gs1-heading {
		font-size: 40px;
		line-height: 1.2;
	}

	.as1-subtext,
	.ss1-subtext,
	.srs1-subtext,
	.cs1-subtext,
	.rrs1-subtext,
	.gs1-subtext {
		font-size: 15px;
	}

	.cs1-btn {
		font-size: 14px;
	}

	.as4-heading,
	.as6-heading {
		font-size: 32px;
	}

	.as4-card-text,
	.as6-text {
		font-size: 15px;
	}
}

@media only screen and (max-width: 1280px) {

	.as1-heading,
	.ss1-heading,
	.srs1-heading,
	.cs1-heading,
	.rrs1-heading,
	.gs1-heading {
		font-size: 48px;
	}
}

@media only screen and (max-width: 1100px) {

	.as3-left,
	.as5-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.as3-heading,
	.as5-heading {
		font-size: 32px;
	}
}

@media only screen and (max-width: 1024px) {

	.about-section1,
	.solutions-section1,
	.services-section1,
	.careers-section1,
	.resources-section1,
	.general-section1 {
		padding: 160px 0 90px;
	}

	.as1-heading,
	.ss1-heading,
	.srs1-heading,
	.cs1-heading,
	.rrs1-heading,
	.gs1-heading {
		font-size: 42px;
	}
}

@media only screen and (max-width: 900px) {

	.about-section3,
	.about-section4,
	.about-section5 {
		padding: 72px 0;
	}

	/* Section 4 – Mission & Vision */
	.as4-header {
		margin-bottom: 40px;
	}

	.as4-cards {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.as4-card-mission,
	.as4-card-vision {
		transition-delay: 0.05s;
	}

	/* Sections 3 & 5 – two-column stacks */
	.as3-inner,
	.as5-inner {
		flex-direction: column;
		gap: 40px;
	}

	.as3-left,
	.as5-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}

	.as3-left.as3-visible,

	.as3-right,
	.as5-right {
		width: 100%;
	}

	.as3-image-wrap,
	.as5-image-wrap {
		transform: translateY(30px);
		border-radius: 14px;
	}

	.as3-image-wrap.as3-visible,

	/* Section 7 – CTA banner */
	.about-section7 {
		padding: 48px 0 64px;
	}

	.as7-banner {
		padding: 56px 36px;
	}

	.as7-heading {
		font-size: 30px;
	}
}

@media only screen and (max-width: 768px) {

	.about-section1,
	.solutions-section1,
	.services-section1,
	.careers-section1,
	.resources-section1,
	.general-section1 {
		padding: 140px 0 72px;
	}

	.about-section3,
	.about-section4,
	.about-section5 {
		padding: 56px 0;
	}

	.about-section6 {
		padding: 56px 0 64px;
	}

	/* Section 1 – Hero */
	.as1-heading,
	.ss1-heading,
	.srs1-heading,
	.cs1-heading,
	.rrs1-heading,
	.gs1-heading {
		font-size: 34px;
	}

	.as1-subtext,
	.ss1-subtext,
	.srs1-subtext,
	.cs1-subtext,
	.gs1-subtext {
		font-size: 15px;
		line-height: 26px;
	}

	.cs1-btns {
		margin-top: 4px;
	}

	.as1-btns {
		margin-bottom: 40px;
	}

	/* Sections 3 & 5 */
	.as3-heading,
	.as5-heading {
		font-size: 28px;
	}

	.as3-text,
	.as5-text {
		font-size: 15px;
		line-height: 26px;
	}

	/* Section 4 */
	.as4-heading {
		font-size: 28px;
	}

	.as4-card-title {
		font-size: 20px;
	}

	.as4-card-text {
		font-size: 15px;
		line-height: 26px;
	}

	/* Section 6 – Team slider */
	.as6-header {
		margin-bottom: 40px;
	}

	.as6-heading {
		font-size: 28px;
	}

	.as6-text {
		font-size: 15px;
		line-height: 26px;
	}

	.as6-slide {
		width: 280px;
	}

	.as6-slide-img {
		height: 340px;
	}
}

@media only screen and (max-width: 600px) {

	.about-section1,
	.solutions-section1,
	.services-section1,
	.careers-section1,
	.resources-section1,
	.general-section1 {
		padding: 120px 0 56px;
	}

	.about-section3,
	.about-section4,
	.about-section5 {
		padding: 48px 0;
	}

	.about-section2 {
		padding: 48px 0 44px;
	}

	.about-section6 {
		padding: 48px 0 56px;
	}

	.about-section7 {
		padding: 40px 0 56px;
	}

	.about-section1 .container,
	.about-section4 .container,
	.about-section6 .container,
	.about-section7 .container,
	.solutions-section1 .container,
	.services-section1 .container,
	.careers-section1 .container,
	.resources-section1 .container,
	.general-section1 .container {
		padding: 0 16px;
	}

	/* Section 1 – Hero */
	.as1-badge,
	.ss1-badge,
	.srs1-badge,
	.cs1-badge,
	.rrs1-badge,
	.gs1-badge {
		font-size: 12px;
		padding: 6px 14px;
	}

	.as1-heading,
	.ss1-heading,
	.srs1-heading,
	.cs1-heading,
	.rrs1-heading,
	.gs1-heading {
		font-size: 28px;
		line-height: 140%;
	}

	.as1-subtext,
	.ss1-subtext,
	.srs1-subtext,
	.rrs1-subtext,
	.gs1-subtext {
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 0;
	}

	.cs1-subtext {
		font-size: 14px;
		line-height: 24px;
		margin-bottom: 28px;
	}

	.cs1-btn {
		font-size: 14px;
		padding: 10px 22px;
	}

	/* Application & positions sections */
	.careers-apply,
	.careers-positions {
		padding: 48px 0;
	}

	.careers-apply .container,
	.careers-positions .container {
		padding: 0 16px;
	}

	.cs2-heading {
		font-size: 26px;
	}

	.cs2-subtext {
		font-size: 14px;
	}

	.cs2-position {
		padding: 22px 20px;
	}

	.cs2-position-title {
		font-size: 19px;
	}

	.cs2-position-desc {
		font-size: 14px;
	}

	.apply-dialog {
		padding: 28px 20px;
		border-radius: 18px;
	}

	.apply-title {
		font-size: 22px;
	}

	.apply-row {
		grid-template-columns: 1fr;
	}

	.apply-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.apply-btn {
		width: 100%;
	}

	/* Section 2 – Logo ticker */
	.as2-inner {
		padding: 0 16px;
		margin-bottom: 36px;
	}

	.as2-subtext {
		font-size: 14px;
	}

	.as2-logo-item {
		padding: 0 20px;
	}

	.as2-logo-item img {
		height: 28px;
	}

	.as2-logos-wrap::before,
	.as2-logos-wrap::after {
		width: 60px;
	}

	/* Sections 3 & 5 */
	.as3-inner,
	.as5-inner {
		gap: 32px;
		padding: 0 16px;
	}

	.as3-heading,
	.as5-heading {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.as3-label,
	.as5-label {
		font-size: 13px;
		padding: 6px 14px;
	}

	.as3-text,
	.as5-text {
		font-size: 14px;
		line-height: 24px;
	}

	/* Section 4 */
	.as4-heading {
		font-size: 24px;
	}

	.as4-card {
		padding: 28px 24px;
	}

	.as4-card-icon {
		font-size: 24px;
	}

	.as4-card-title {
		font-size: 19px;
	}

	.as4-card-text {
		font-size: 14px;
		line-height: 24px;
	}

	/* Section 6 – Team slider */
	.as6-heading {
		font-size: 24px;
	}

	.as6-text {
		font-size: 14px;
		line-height: 24px;
	}

	.as6-slider-wrap {
		padding: 0 16px;
	}

	.as6-slides-set {
		gap: 18px;
	}

	.as6-slide {
		width: 240px;
	}

	.as6-slide-img {
		height: 300px;
		margin-bottom: 16px;
	}

	.as6-slide-name {
		font-size: 19px;
	}

	.as6-slide-role {
		font-size: 14px;
	}

	/* Section 7 – CTA banner */
	.as7-banner {
		padding: 40px 20px;
		border-radius: 16px;
	}

	.as7-heading {
		font-size: 22px;
	}

	.as7-subtext {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.as7-btn {
		font-size: 15px;
		padding: 9px 20px;
	}

	.as7-deco-bl {
		width: 140px;
		height: 140px;
		bottom: -50px;
		left: -40px;
	}

	.as7-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}
}

/*========================================================*/
/*          Solutions Page – Responsive                   */
/*========================================================*/
@media only screen and (max-width: 1680px) {

	.ss2-heading,
	.ss3-heading,
	.ss4-heading {
		font-size: 32px;
	}

	.ss2-text,
	.ss2-feature-item span,
	.ss3-text,
	.ss4-subtext,
	.ss4-card-text,
	.ss4-card-points li,
	.ss5-text,
	.srs2-subtext,
	.srs2-card-text {
		font-size: 15px;
	}

	.ss5-heading {
		font-size: 34px;
	}

	.srs2-heading,
	.srs3-heading,
	.cr2-heading,
	.cr3-heading {
		font-size: 32px;
	}

	.cr2-card-text,
	.cr3-text,
	.cr3-feature-item span {
		font-size: 15px;
	}

	.srs3-badge {
		font-size: 14px;
	}

	.srs3-step-desc {
		font-size: 15px;
	}
}

@media only screen and (max-width: 1024px) {
	.srs2-grid {
		grid-template-columns: repeat(2, 1fr);
	}

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

	.srs2-text-card:nth-child(1),
	.srs2-image-card-1,
	.srs2-text-card:nth-child(3),
	.srs2-text-card:nth-child(4),
	.srs2-text-card:nth-child(5),
	.srs2-image-card-2 {
		grid-column: span 1;
	}
}

@media only screen and (max-width: 1100px) {
	.ss2-left {
		flex: 0 0 48%;
		max-width: 48%;
	}

	.ss3-right {
		flex: 0 0 48%;
		max-width: 48%;
	}

	.ss5-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.srs4-left {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.cr3-left {
		flex: 0 0 48%;
		max-width: 48%;
	}

	.ss2-heading,
	.ss3-heading {
		font-size: 30px;
	}

	.ss5-heading {
		font-size: 30px;
	}

	.srs4-heading,
	.cr3-heading {
		font-size: 30px;
	}
}

@media only screen and (max-width: 900px) {

	.solutions-section2,
	.solutions-section3,
	.solutions-section4,
	.solutions-section5,
	.services-section2,
	.services-section3,
	.services-section4,
	.careers-section2,
	.careers-section3 {
		padding: 72px 0;
	}

	.cr2-header {
		margin-bottom: 40px;
	}

	.cr3-inner {
		flex-direction: column;
		gap: 40px;
	}

	.cr3-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.cr3-right {
		width: 100%;
		transform: translateY(30px);
	}


	.services-section5 {
		padding: 72px 0 80px;
	}

	.careers-apply,
	.careers-positions {
		padding: 64px 0;
	}

	.apply-dialog {
		padding: 40px;
	}

	.cs2-position {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	.cs2-position-action {
		width: 100%;
	}

	.cs2-apply-btn {
		width: 100%;
		justify-content: center;
	}

	.srs5-header {
		margin-bottom: 40px;
	}

	.srs4-inner {
		flex-direction: column;
		gap: 40px;
	}

	.srs4-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.srs4-right {
		width: 100%;
		transform: translateY(30px);
	}


	.srs2-header {
		margin-bottom: 40px;
	}

	.srs3-header {
		margin-bottom: 40px;
	}

	.srs3-steps {
		flex-wrap: wrap;
		gap: 40px 0;
	}

	.srs3-step {
		flex: 0 0 50%;
		max-width: 50%;
	}

	.ss5-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ss5-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		order: 2;
	}

	.ss5-card-col-2 {
		margin-top: 0;
	}

	.ss5-right {
		width: 100%;
		transform: translateY(30px);
		order: 1;
	}


	/* Section 6 – CTA banner */
	.solutions-section6,
	.services-section6 {
		padding: 48px 0 64px;
	}

	.ss6-banner,
	.srs6-banner,
	.cr6-banner {
		padding: 56px 36px;
	}

	.ss6-heading,
	.srs6-heading,
	.cr6-heading {
		font-size: 30px;
	}

	.careers-section6 {
		padding: 48px 0 64px;
	}

	.ss4-header {
		margin-bottom: 40px;
	}

	.ss4-cards {
		grid-template-columns: 1fr;
		max-width: 520px;
		margin: 0 auto;
		gap: 24px;
	}

	.ss4-card:nth-child(1),
	.ss4-card:nth-child(2),
	.ss4-card:nth-child(3) {
		transition-delay: 0.05s;
	}

	.ss3-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ss3-left {
		width: 100%;
		transform: translateY(30px);
		order: 2;
	}


	.ss3-right {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
		order: 1;
	}


	.ss3-image-wrap {
		border-radius: 14px;
	}

	.ss2-inner {
		flex-direction: column;
		gap: 40px;
	}

	.ss2-left {
		flex: none;
		max-width: 100%;
		width: 100%;
		transform: translateY(30px);
	}


	.ss2-right {
		width: 100%;
		transform: translateY(30px);
	}


	.ss2-image-wrap {
		border-radius: 14px;
	}
}

@media only screen and (max-width: 768px) {

	.solutions-section2,
	.solutions-section3,
	.solutions-section4,
	.solutions-section5,
	.services-section2 {
		padding: 56px 0;
	}

	.srs2-grid {
		grid-template-columns: 1fr;
	}

	.srs2-image-card {
		min-height: 240px;
		order: 0;
	}

	.srs2-image-card img {
		min-height: 240px;
	}

	.srs2-heading {
		font-size: 28px;
	}

	.srs2-card-title {
		font-size: 22px;
	}

	.services-section3,
	.services-section4,
	.careers-section2 {
		padding: 56px 0;
	}

	.cr2-heading {
		font-size: 28px;
	}

	.cr2-card-title {
		font-size: 20px;
	}

	.services-section5 {
		padding: 56px 0 64px;
	}

	.srs3-heading {
		font-size: 28px;
	}

	.srs4-heading {
		font-size: 28px;
	}

	.srs5-heading {
		font-size: 28px;
	}

	.srs5-question {
		padding: 20px 22px;
	}

	.srs5-answer {
		padding: 0 22px 20px;
	}

	.srs3-step-desc {
		font-size: 15px;
		line-height: 26px;
	}

	.ss2-heading,
	.ss3-heading,
	.ss4-heading {
		font-size: 28px;
	}

	.ss5-heading {
		font-size: 28px;
	}

	.ss2-text,
	.ss3-text,
	.ss4-subtext,
	.ss5-text {
		font-size: 15px;
		line-height: 26px;
	}

	.ss4-card-title {
		font-size: 20px;
	}

	.ss5-feature-label {
		font-size: 16px;
	}
}

@media only screen and (max-width: 600px) {

	.solutions-section2,
	.solutions-section3,
	.solutions-section4,
	.solutions-section5,
	.services-section2 {
		padding: 48px 0;
	}

	.solutions-section2 .container,
	.solutions-section3 .container,
	.solutions-section4 .container,
	.solutions-section5 .container,
	.services-section2 .container {
		padding: 0 16px;
	}

	.srs2-heading {
		font-size: 24px;
	}

	.srs2-subtext {
		font-size: 14px;
		line-height: 24px;
	}

	.srs2-text-card {
		padding: 28px 24px 32px;
	}

	.srs2-card-title {
		font-size: 20px;
	}

	.srs2-card-text {
		font-size: 14px;
		line-height: 24px;
	}

	.srs2-image-card,
	.srs2-image-card img {
		min-height: 200px;
	}

	.services-section3,
	.services-section4,
	.careers-section2 {
		padding: 48px 0;
	}

	.services-section5 {
		padding: 48px 0 56px;
	}

	.services-section3 .container,
	.services-section4 .container,
	.services-section5 .container,
	.careers-section2 .container {
		padding: 0 16px;
	}

	.cr2-heading {
		font-size: 24px;
	}

	.cr2-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.cr2-card {
		padding: 28px 24px 32px;
	}

	.cr2-card-title {
		font-size: 19px;
	}

	.cr2-card-text {
		font-size: 14px;
		line-height: 24px;
	}

	.srs5-badge {
		font-size: 14px;
	}

	.srs5-heading {
		font-size: 24px;
	}

	.srs5-subtext {
		font-size: 15px;
	}

	.srs5-question {
		padding: 18px 18px;
	}

	.srs5-question span {
		font-size: 15px;
	}

	.srs5-answer {
		padding: 0 18px 18px;
	}

	.srs5-answer p,
	.srs5-answer div {
		font-size: 15px;
		line-height: 26px;
	}

	.srs4-heading {
		font-size: 24px;
		margin-bottom: 24px;
	}

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

	.srs4-feature-icon {
		width: 38px;
		height: 38px;
	}

	.srs4-feature-desc {
		font-size: 14px;
	}

	.srs3-badge {
		font-size: 13px;
		padding: 6px 16px;
	}

	.srs3-heading {
		font-size: 24px;
	}

	.srs3-steps {
		gap: 32px 0;
	}

	.srs3-step {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.srs3-step-circle {
		width: 64px;
		height: 64px;
	}

	.srs3-step-num {
		font-size: 22px;
	}

	.srs3-step-title {
		font-size: 20px;
	}

	.srs3-step-desc {
		font-size: 14px;
		line-height: 24px;
	}

	.ss2-heading,
	.ss3-heading,
	.ss4-heading,
	.ss5-heading {
		font-size: 24px;
	}

	.ss2-text,
	.ss3-text,
	.ss4-subtext,
	.ss5-text {
		font-size: 14px;
		line-height: 24px;
	}

	.ss5-left {
		flex-direction: column;
		gap: 16px;
	}

	.ss5-card {
		padding: 22px 22px 26px;
	}

	.ss5-card-title {
		font-size: 18px;
	}

	.ss5-card-text {
		font-size: 14px;
		line-height: 24px;
	}

	.ss5-feature-icon {
		width: 42px;
		height: 42px;
	}

	.ss5-feature-label {
		font-size: 15px;
	}

	.ss4-cards {
		max-width: 100%;
	}

	.ss4-card {
		padding: 28px 24px 32px;
	}

	.ss4-card-title {
		font-size: 19px;
	}

	.ss4-card-text,
	.ss4-card-points li {
		font-size: 14px;
	}

	.ss3-cards {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.ss3-card {
		padding: 20px 20px 24px;
	}

	.ss3-card-icon {
		margin-bottom: 20px;
	}

	.ss3-card-title {
		font-size: 17px;
	}

	.ss2-feature-list {
		grid-template-columns: 1fr;
		gap: 14px;
		margin-bottom: 28px;
	}

	.ss2-feature-item span {
		font-size: 14px;
	}

	.ss2-stats {
		grid-template-columns: 1fr;
		gap: 18px;
		padding: 24px;
	}

	.ss2-stat-value {
		font-size: 17px;
	}

	/* Section 6 – CTA banner */
	.solutions-section6,
	.services-section6 {
		padding: 40px 0 56px;
	}

	.services-section6 .container {
		padding: 0 16px;
	}

	.ss6-banner,
	.srs6-banner,
	.cr6-banner {
		padding: 40px 20px;
		border-radius: 16px;
	}

	.ss6-heading,
	.srs6-heading,
	.cr6-heading {
		font-size: 22px;
	}

	.ss6-subtext,
	.srs6-subtext,
	.cr6-subtext {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.ss6-btn,
	.srs6-btn,
	.cr6-btn {
		font-size: 15px;
		padding: 9px 20px;
	}

	.ss6-deco-bl,
	.srs6-deco-bl,
	.cr6-deco-bl {
		width: 140px;
		height: 140px;
		bottom: -50px;
		left: -40px;
	}

	.ss6-deco-tr,
	.srs6-deco-tr,
	.cr6-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}

	.careers-section6 {
		padding: 40px 0 56px;
	}

	.careers-section6 .container {
		padding: 0 16px;
	}
}

/*--------------------------------------------------------------
# Blog Section 2 – Latest Insights
--------------------------------------------------------------*/
.blog-section2 {
	background: #ffffff;
	padding-top: 100px;
	overflow: hidden;
}

/* Header */
.bls2-header {
	margin-bottom: 36px;
}

.bls2-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 6px 18px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #007A7E;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 24px;
	margin-bottom: 16px;
}

.bls2-heading {
	margin: 0;
	color: #0B0D17;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

/* Category Filters */
.bls2-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 48px;
}

.bls2-filter-btn {
	display: inline-flex;
	align-items: center;
	padding: 8px 22px;
	border-radius: 100px;
	border: 1.5px solid #d4d7e0;
	background: #ffffff;
	color: #3d4155;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	cursor: pointer;
	transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

.bls2-filter-btn:hover {
	border-color: #13B3C3;
	color: #13B3C3;
}

.bls2-filter-btn.bls2-active {
	background: #BEF2F8;
	border-color: #BEF2F8;
	color: #007A7E;
}

/* Cards Grid */
.bls2-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 56px;
	transition: opacity 0.3s ease;
}

/* Card */
.bls2-card {
	background: #f7f8fc;
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.3s ease;
}


.bls2-card.bls2-visible:hover {
	box-shadow: 0 12px 36px rgba(19, 179, 195, 0.14);
}

/* Stagger animation */
.bls2-card:nth-child(2) {
	transition-delay: 0.10s;
}

.bls2-card:nth-child(3) {
	transition-delay: 0.20s;
}

.bls2-card:nth-child(4) {
	transition-delay: 0.05s;
}

.bls2-card:nth-child(5) {
	transition-delay: 0.15s;
}

.bls2-card:nth-child(6) {
	transition-delay: 0.25s;
}

/* Card image */
.bls2-card-img-wrap {
	display: block;
	overflow: hidden;
	border-radius: 20px 20px 0 0;
	aspect-ratio: 16 / 10;
}

.bls2-card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bls2-card.bls2-visible:hover .bls2-card-img {
	transform: scale(1.05);
}

/* Card body */
.bls2-card-body {
	padding: 24px 24px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.bls2-card-cat {
	display: block;
	color: #13B3C3;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.bls2-card-title {
	margin: 0 0 12px;
	color: #0B0D17;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 150%;
}

.bls2-card-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}

.bls2-card-title a:hover {
	color: #13B3C3;
}

.bls2-card-excerpt {
	margin: 0 0 auto;
	padding-bottom: 20px;
	color: #5b6280;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 168%;
}

/* Card footer */
.bls2-card-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 16px;
	border-top: 1px solid #e8eaf0;
}

.bls2-card-author {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.bls2-author-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #d0d4e2;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #7a84a0;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	flex-shrink: 0;
}

.bls2-author-name {
	color: #3d4155;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bls2-card-meta {
	color: #9399b0;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 400;
	white-space: nowrap;
	flex-shrink: 0;
}

/* No posts state */
.bls2-no-posts {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px 20px;
	color: #9399b0;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
}

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

.bls2-load-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 40px;
	border-radius: 100px;
	border: 1.5px solid #0B0D17;
	background: transparent;
	color: #0B0D17;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	cursor: pointer;
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

.bls2-load-more-btn:hover {
	background: #0B0D17;
	color: #ffffff;
}

.bls2-load-more-btn.bls2-loading {
	opacity: 0.55;
	pointer-events: none;
}

/* ── Responsive ──────────────────────── */

@media only screen and (max-width: 1024px) {
	.bls2-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 22px;
	}
}

@media only screen and (max-width: 768px) {
	.blog-section2 {
		padding: 70px 0 80px;
	}

	.bls2-heading {
		font-size: 28px;
	}

	.bls2-filters {
		margin-bottom: 32px;
	}

	.bls2-filter-btn {
		font-size: 14px;
		padding: 7px 18px;
	}

	.bls2-grid {
		margin-bottom: 40px;
	}
}

@media only screen and (max-width: 680px) {
	.bls2-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.bls2-card:nth-child(2),
	.bls2-card:nth-child(3),
	.bls2-card:nth-child(4),
	.bls2-card:nth-child(5),
	.bls2-card:nth-child(6) {
		transition-delay: 0s;
	}
}

@media only screen and (max-width: 560px) {
	.blog-section2 {
		padding: 50px 0 60px;
	}

	.bls2-heading {
		font-size: 24px;
	}

	.bls2-card-body {
		padding: 18px 18px 16px;
	}

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

	.bls2-load-more-btn {
		font-size: 14px;
		padding: 11px 28px;
	}
}

/*--------------------------------------------------------------
# Blog Section 3 – CTA Banner
--------------------------------------------------------------*/
.blog-section3 {
	background: #ffffff;
	padding: 100px 0;
	overflow: hidden;
}

.bls3-banner {
	background: linear-gradient(to right, #25bfc8 0%, #1f5dc8 100%);
	border-radius: 24px;
	padding: 72px 48px;
	text-align: center;
	position: relative;
	overflow: hidden;
}


.bls3-deco {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	pointer-events: none;
}

.bls3-deco-bl {
	width: 220px;
	height: 220px;
	left: -130px;
	bottom: -130px;
}

.bls3-deco-tr {
	width: 280px;
	height: 280px;
	top: -150px;
	right: -150px;
}

.bls3-content {
	position: relative;
	z-index: 1;
}

.bls3-heading {
	margin: 0 0 16px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 36px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.bls3-subtext {
	margin: 0 0 32px;
	color: #f3f3f3;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.bls3-btns {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.bls3-btn {
	display: inline-block;
	padding: 9px 24px;
	border-radius: 50px;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
	white-space: nowrap;
	color: #ffffff;
	font-family: "Poppins", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.bls3-btn-solid {
	background: #ffffff;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.bls3-btn-solid:hover {
	background: #e8f4fb;
	color: #1265a0;
	border: 2px solid #ffffff;
}

.bls3-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid #ffffff;
}

.bls3-btn-outline:hover {
	background: rgba(255, 255, 255, 0.15);
	color: #ffffff;
	border: 2px solid #ffffff;
}

/* Responsive – tablet */
@media only screen and (max-width: 900px) {
	.blog-section3 {
		padding: 48px 0 64px;
	}

	.bls3-banner {
		padding: 56px 36px;
	}

	.bls3-heading {
		font-size: 30px;
	}
}

/* Responsive – mobile */
@media only screen and (max-width: 560px) {
	.blog-section3 {
		padding: 40px 0 56px;
	}

	.blog-section3 .container {
		padding: 0 16px;
	}

	.bls3-banner {
		padding: 48px 24px;
		border-radius: 18px;
	}

	.bls3-heading {
		font-size: 22px;
	}

	.bls3-subtext {
		font-size: 14px;
		margin-bottom: 24px;
	}

	.bls3-btns {
		flex-direction: column;
		gap: 12px;
	}

	.bls3-btn {
		width: 100%;
		text-align: center;
		padding: 11px 24px;
		font-size: 15px;
	}

	.bls3-deco-bl {
		width: 140px;
		height: 140px;
		left: -50px;
		bottom: -50px;
	}

	.bls3-deco-tr {
		width: 180px;
		height: 180px;
		top: -60px;
		right: -40px;
	}
}

/*--------------------------------------------------------------
# Blog Details Section 1 – Hero
--------------------------------------------------------------*/
.blogdetails-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	min-height: 520px;
	padding: 140px 0 60px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/* When a featured image is present the section is dark */
.blogdetails-section1.bds1-has-image {
	background: #0d1b2a;
}

/* Full-bleed featured image */
.bds1-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	z-index: 0;
}

/* Overlay — stronger at the bottom so text stays readable */
.bds1-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
			rgba(0, 15, 30, 0.18) 0%,
			rgba(0, 15, 30, 0.55) 50%,
			rgba(0, 10, 20, 0.82) 100%);
	z-index: 1;
}

/* Container needs relative so content sits above overlay */
.blogdetails-section1 .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

/* Inner wrapper — content anchored to bottom */
.bds1-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 920px;
}

/* Badge */
.bds1-badge {
	display: inline-flex;
	align-items: center;
	padding: 6px 18px;
	margin-bottom: 20px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.88);
	color: #1a1a1a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: 0.01em;
}

/* No featured image – teal badge to match contact-section1 */
.blogdetails-section1:not(.bds1-has-image) .bds1-badge {
	background: #BEF2F8;
	color: #004040;
}

/* Heading */
.bds1-heading {
	margin: 0 0 24px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 52px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	letter-spacing: -0.5px;
}

/* Meta row */
.bds1-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.bds1-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: rgba(255, 255, 255, 0.88);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-style: normal;
	font-weight: 400;
	line-height: 26px;
}

.bds1-meta-item svg {
	display: block;
	flex-shrink: 0;
}

.bds1-meta-sep {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
}

/*--------------------------------------------------------------
# Blog Details Section 2 – Post Body
--------------------------------------------------------------*/
.blogdetails-section2 {
	background: #ffffff;
	padding: 72px 0 100px;
	overflow: hidden;
}

.bds2-inner {
	max-width: 860px;
	margin: 0 auto;
}

.bds2-content {
	color: #2a2a2a;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
}

.bds2-content h1,
.bds2-content h2,
.bds2-content h3,
.bds2-content h4,
.bds2-content h5,
.bds2-content h6 {
	color: #000000;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-weight: 700;
	line-height: 140%;
	margin: 36px 0 16px;
}

.bds2-content h1 {
	font-size: 36px;
}

.bds2-content h2 {
	font-size: 30px;
}

.bds2-content h3 {
	font-size: 24px;
}

.bds2-content h4 {
	font-size: 20px;
}

.bds2-content h5,
.bds2-content h6 {
	font-size: 17px;
}

.bds2-content p {
	margin: 0 0 20px;
}

.bds2-content p:last-child {
	margin-bottom: 0;
}

.bds2-content a {
	color: #067d7d;
	text-decoration: underline;
}

.bds2-content a:hover {
	color: #13B3C3;
}

.bds2-content ul,
.bds2-content ol {
	margin: 0 0 20px 24px;
	padding: 0;
}

.bds2-content li {
	margin-bottom: 8px;
}

.bds2-content img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	display: block;
	margin: 28px auto;
}

.bds2-content blockquote {
	margin: 32px 0;
	padding: 20px 28px;
	border-left: 4px solid #13B3C3;
	background: #f3fdfe;
	border-radius: 0 12px 12px 0;
	color: #004040;
	font-style: italic;
}

.bds2-content blockquote p {
	margin: 0;
}

.bds2-content pre,
.bds2-content code {
	background: #f3f4f5;
	border-radius: 6px;
	font-size: 15px;
}

.bds2-content pre {
	padding: 20px 24px;
	overflow-x: auto;
	margin: 0 0 20px;
}

.bds2-content code {
	padding: 2px 6px;
}

.bds2-page-links {
	margin-top: 40px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 15px;
	color: #4c4c4c;
}

/* ── Responsive – 1400px ── */
@media only screen and (max-width: 1400px) {
	.bds1-heading {
		font-size: 44px;
	}

	.bds1-badge {
		font-size: 14px;
	}

	.bds1-meta-item {
		font-size: 14px;
	}
}

/* ── Responsive – 1280px ── */
@media only screen and (max-width: 1280px) {
	.bds1-heading {
		font-size: 40px;
	}
}

/* ── Responsive – 1024px ── */
@media only screen and (max-width: 1024px) {
	.blogdetails-section1 {
		min-height: 420px;
		padding: 130px 0 52px;
	}

	.bds1-heading {
		font-size: 36px;
	}

	.bds2-inner {
		max-width: 100%;
	}
}

/* ── Responsive – 768px ── */
@media only screen and (max-width: 768px) {
	.blogdetails-section1 {
		min-height: 360px;
		padding: 120px 0 44px;
	}

	.bds1-heading {
		font-size: 30px;
	}

	.blogdetails-section2 {
		padding: 56px 0 72px;
	}

	.bds2-content {
		font-size: 16px;
		line-height: 28px;
	}

	.bds2-content h1 {
		font-size: 28px;
	}

	.bds2-content h2 {
		font-size: 24px;
	}

	.bds2-content h3 {
		font-size: 20px;
	}
}

/* ── Responsive – 600px ── */
@media only screen and (max-width: 600px) {
	.blogdetails-section1 {
		min-height: 300px;
		padding: 110px 0 36px;
	}

	.blogdetails-section1 .container {
		padding: 0 16px;
	}

	.bds1-badge {
		font-size: 12px;
		padding: 5px 14px;
	}

	.bds1-heading {
		font-size: 24px;
		line-height: 136%;
		letter-spacing: -0.2px;
	}

	.bds1-meta-item {
		font-size: 13px;
	}

	.blogdetails-section2 .container {
		padding: 0 16px;
	}

	.blogdetails-section2 {
		padding: 48px 0 60px;
	}
}


/*==============================================================
  Scroll-reveal animations
  Initial hidden states are set here; the .xxx-visible class
  (added by IntersectionObserver in innerpage-custom.js) reveals them.
  These rules sit last so they never override layout/visual styles.
==============================================================*/

/* ── Hero headings – section 1 of every inner page ─────────── */
.as1-heading,
.rrs1-heading,
.cts1-heading,
.ss1-heading,
.srs1-heading,
.cs1-heading {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.as1-subtext,
.rrs1-subtext,
.cts1-subtext,
.ss1-subtext,
.srs1-subtext,
.cs1-subtext {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.cs1-btns {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

/* ── Platform hero dashboard image ─────────────────────────── */
.ps1-dashboard-img {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── Blog detail hero ───────────────────────────────────────── */
.bds1-inner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── Slide from left ────────────────────────────────────────── */
.ps2-left,
.ps4-left,
.ps6-left,
.ps8-left,
.as3-left,
.as5-left,
.cts2-left,
.ss2-left,
.ss3-left,
.srs4-left,
.cr3-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── Slide from right (staggered 0.15 s delay) ──────────────── */
.ps2-image-wrap,
.ps4-right,
.ps6-right,
.ps8-right,
.as3-image-wrap,
.as5-image-wrap,
.cts2-right,
.ss2-right,
.ss3-right,
.ss5-right,
.srs4-right,
.cr3-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

/* ── Cards & steps – slide up, hover transitions preserved ──── */
.ps3-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ps5-step {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.ps7-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ps8-feature-item {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ps10-card {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ps11-item {
	opacity: 0;
	transform: translateY(20px);
	transition: background 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.ps12-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.as4-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.as7-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.rrs2-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.rrs3-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease;
}

.rrs4-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cts3-top {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.65s ease, transform 0.65s ease;
}

.cts3-map-wrap {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}

.cts4-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ss3-card {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ss4-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.ss5-card {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.5s ease, transform 0.5s ease, background 0.3s ease;
}

.ss6-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.srs2-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.srs3-step {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.srs4-feature-item {
	opacity: 0;
	transform: translateX(-20px);
	transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.35s ease, translate 0.35s ease;
}

.srs5-item {
	opacity: 0;
	transform: translateY(20px);
	transition: background 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.srs6-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cr2-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.cr4-step {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.cr5-card {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.cr6-banner {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

/* ── Visible state – shared by all animated elements ────────── */
.ps1-dashboard-img.ps1-visible,
.ps2-left.ps2-visible,
.ps2-image-wrap.ps2-visible,
.ps3-card.ps3-visible,
.ps4-left.ps4-visible,
.ps4-right.ps4-visible,
.ps5-step.ps5-visible,
.ps6-left.ps6-visible,
.ps6-right.ps6-visible,
.ps7-card.ps7-visible,
.ps8-left.ps8-visible,
.ps8-right.ps8-visible,
.ps8-feature-item.ps8-visible,
.ps10-card.ps10-visible,
.ps11-item.ps11-visible,
.ps12-banner.ps12-visible,
.as1-heading.as1-visible,
.as1-subtext.as1-visible,
.as3-left.as3-visible,
.as3-image-wrap.as3-visible,
.as4-card.as4-visible,
.as5-left.as5-visible,
.as5-image-wrap.as5-visible,
.as7-banner.as7-visible,
.rrs1-heading.rrs1-visible,
.rrs1-subtext.rrs1-visible,
.rrs2-card.rrs2-visible,
.rrs3-card.rrs3-visible,
.rrs4-banner.rrs4-visible,
.cts1-heading.cts1-visible,
.cts1-subtext.cts1-visible,
.cts2-left.cts2-visible,
.cts2-right.cts2-visible,
.cts3-top.cts3-visible,
.cts3-map-wrap.cts3-visible,
.cts4-banner.cts4-visible,
.ss1-heading.ss1-visible,
.ss1-subtext.ss1-visible,
.ss2-left.ss2-visible,
.ss2-right.ss2-visible,
.ss3-left.ss3-visible,
.ss3-right.ss3-visible,
.ss3-card.ss3-visible,
.ss4-card.ss4-visible,
.ss5-card.ss5-visible,
.ss5-right.ss5-visible,
.ss6-banner.ss6-visible,
.srs1-heading.srs1-visible,
.srs1-subtext.srs1-visible,
.srs2-card.srs2-visible,
.srs3-step.srs3-visible,
.srs4-left.srs4-visible,
.srs4-right.srs4-visible,
.srs4-feature-item.srs4-visible,
.srs5-item.srs5-visible,
.srs6-banner.srs6-visible,
.cs1-heading.cs1-visible,
.cs1-subtext.cs1-visible,
.cs1-btns.cs1-visible,
.cr2-card.cr2-visible,
.cr3-left.cr3-visible,
.cr3-right.cr3-visible,
.cr4-step.cr4-visible,
.cr5-card.cr5-visible,
.cr6-banner.cr6-visible,
.bds1-inner.bds1-visible {
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------
# General Section 1 – Hero
--------------------------------------------------------------*/
.general-section1 {
	background: linear-gradient(90deg, #13B3C3 0%, #1469BA 100%);
	padding: 200px 0 120px;
	overflow: hidden;
	position: relative;
}

.gs1-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.gs1-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 8px 16px;
	border: none;
	margin-bottom: 24px;
	letter-spacing: 0.01em;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

.gs1-heading {
	margin: 0 0 20px;
	letter-spacing: -0.5px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 56px;
	font-style: normal;
	font-weight: 700;
	line-height: 140%;
}

.gs1-subtext {
	margin: 0 0 36px;
	max-width: 860px;
	color: #ffffff;
	text-align: center;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 28px;
}

/*--------------------------------------------------------------
# General Page – Content Section
--------------------------------------------------------------*/
.page-content-section {
	background: #ffffff;
	padding: 80px 0 100px;
}

.page-entry {
	max-width: 860px;
	margin: 0 auto;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 28px;
	color: #1a2e2e;
}

.page-entry h2,
.page-entry h3,
.page-entry h4 {
	color: #004040;
	font-weight: 700;
	margin: 32px 0 12px;
}

.page-entry p {
	margin: 0 0 20px;
}

.page-entry ul,
.page-entry ol {
	padding-left: 24px;
	margin: 0 0 20px;
}

.page-entry a {
	color: #067D7D;
	text-decoration: underline;
}

/* ── Scroll-animation initial state ── */
.gs1-heading,
.gs1-subtext {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.gs1-subtext {
	transition-delay: 0.15s;
}

/* ── Visible state (added by IntersectionObserver) ── */
.gs1-heading.gs1-visible,
.gs1-subtext.gs1-visible {
	opacity: 1;
	transform: translate(0, 0);
}

/*--------------------------------------------------------------
# 404 Error Page
--------------------------------------------------------------*/
.error404-section {
	background: var(--Linear-gradient-2, linear-gradient(90deg, #13B3C3 0%, #1469BA 100%));
	min-height: 100vh;
	display: flex;
	align-items: center;
	padding: 100px 0;
}

.e404-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.e404-code {
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 160px;
	font-weight: 800;
	line-height: 1;
	color: rgba(255, 255, 255, 0.7);
	letter-spacing: -8px;
	margin-bottom: 24px;
	user-select: none;
}

.e404-badge {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: 8px 16px;
	border-radius: 100px;
	background: #BEF2F8;
	color: #004040;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	margin-bottom: 24px;
}

.e404-heading {
	margin: 0 0 20px;
	max-width: 700px;
	color: #ffffff;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 48px;
	font-weight: 700;
	line-height: 140%;
	letter-spacing: -0.5px;
}

.e404-subtext {
	margin: 0 0 40px;
	max-width: 560px;
	color: rgba(255, 255, 255, 0.8);
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

.e404-btns {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	justify-content: center;
}

.e404-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 28px;
	border-radius: 100px;
	font-family: "Red Hat Display", Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: all 0.25s ease;
}

.e404-btn-solid {
	background: #ffffff;
	color: #004040;
	border: 2px solid #ffffff;
}

.e404-btn-solid:hover {
	background: transparent;
	color: #ffffff;
	border: 2px solid #fff;
}

.e404-btn-outline {
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.5);
}

.e404-btn-outline:hover {
	background: rgba(255, 255, 255, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
	.e404-code {
		font-size: 100px;
		letter-spacing: -4px;
	}

	.e404-heading {
		font-size: 32px;
	}

	.e404-btns {
		flex-direction: column;
		width: 100%;
	}

	.e404-btn {
		width: 100%;
		justify-content: center;
	}
}

@media only screen and (max-width: 1680px) {
	.container {
		max-width: 81%;
	}
}

@media only screen and (max-width: 1024px) {
	.container {
		max-width: 90%;
	}
}