/*
 * AI Strategy & Consulting
 * Full Responsive CSS
 * Figma-based desktop + tablet + mobile
 */

/* =========================================================
   GLOBAL
========================================================= */

#primary {
	margin: 0;
	padding: 0;
}

.pt-ai-strategy-page {
	--pt-ai-orange: #E98305;
	--pt-ai-black: #070707;
	--pt-ai-text: #070707;
	--pt-ai-bg: #FDFAF5;
	--pt-ai-border: #E2E8F0;
	--pt-ai-font: "Poppins", sans-serif;

	font-family: var(--pt-ai-font);
	color: var(--pt-ai-text);

	overflow: hidden;
}

.pt-ai-strategy-page *,
.pt-ai-strategy-page *::before,
.pt-ai-strategy-page *::after {
	box-sizing: border-box;
}


/* =========================================================
   HERO
========================================================= */

.pt-ai-hero {
	position: relative;

	width: 100%;
	min-height: 828px;

	background: var(--pt-ai-bg);

	isolation: isolate;
	overflow: hidden;
}


/* =========================================================
   HERO BACKGROUND IMAGE
========================================================= */

.pt-ai-hero__background {
	position: absolute;

	z-index: -1;

	top: 0;
	right: 0;
	bottom: 0;
	left: 0;

	background:
		linear-gradient(
			103.32deg,
			#FDFAF5 24.01%,
			rgba(255, 255, 255, 0) 77.32%
		),
		url("https://assets.primotech.com/wp-content/uploads/2026/09/image-1660685056-1.png")
		center top / cover no-repeat;
}


/* =========================================================
   HERO CONTAINER
========================================================= */

.pt-ai-hero__container {
	position: relative;

	width: min(1240px, calc(100% - 80px));
	min-height: 828px;

	margin: 0 auto;

	display: flex;
	align-items: flex-start;
}


/* =========================================================
   HERO CONTENT
========================================================= */

.pt-ai-hero__content {
	width: 716px;

	padding-top: 100px;
}


/* =========================================================
   HEADING
========================================================= */

.pt-ai-hero__content h1 {
	width: 100%;
	max-width: 716px;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 55px;
	line-height: 70px;

	font-weight: 700;

	letter-spacing: 0;

	background: linear-gradient(
		90deg,
		#070707 0%,
		#E98305 48.08%
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	background-clip: text;

	color: transparent;
}

.pt-ai-hero__content .pt-top-banner-second-heading {
    background: #070707;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}



/*
 * Keep highlighted text transparent so the parent
 * gradient remains visible.
 */

.pt-ai-hero__content h1 span {
	color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.pt-ai-hero__description {
	width: 543px;
	max-width: 100%;

	margin: 24px 0 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;
	line-height: 34px;

	font-weight: 500;

	letter-spacing: 0;

	color: #070707;
}


/* =========================================================
   CTA BUTTON
========================================================= */

.pt-ai-hero__cta {
	position: relative;

	z-index: 5;

	display: inline-flex;

	align-items: center;
	justify-content: center;

	height: 51px;

	margin-top: 32px;
	padding: 20px 30px;

	background: #E98305;

	border-radius: 5px;

	font-family: "Poppins", sans-serif;

	font-size: 20px;
	line-height: 21px;

	font-weight: 700;

	color: #FFFFFF;

	text-align: center;
	text-decoration: none;

	box-shadow: none;

	transition:
		background-color .2s ease,
		transform .2s ease,
		box-shadow .2s ease;
}

.pt-ai-hero__cta:hover,
.pt-ai-hero__cta:focus-visible {
	background: #D87500;

	color: #FFFFFF;

	transform: translateY(-1px);

	box-shadow:
		0 5px 14px rgba(233, 131, 5, .22);
}


/* =========================================================
   STATS BAR - DESKTOP
========================================================= */

.pt-ai-stats {
	position: absolute;

	z-index: 10;

	left: 50%;
	bottom: 90px;

	width: min(1240px, calc(100% - 80px));
	height: 115px;

	transform: translateX(-50%);

	padding: 28px 36px;

	background: rgba(255, 255, 255, 0.75);

	border: 1px solid rgba(20, 20, 20, 0.65);

	border-radius: 24px;

	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	box-shadow:
		0 7px 18px rgba(0, 0, 0, .05);
}


/* =========================================================
   STATS INNER
========================================================= */

.pt-ai-stats__inner {
	width: 100%;
	height: 100%;

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	align-items: center;

	gap: 24px;

	padding: 0;
}


/* =========================================================
   INDIVIDUAL STAT
========================================================= */

.pt-ai-stat {
	position: relative;

	width: 100%;
	height: 59px;

	display: flex;

	align-items: center;

	gap: 16px;

	min-width: 0;

	padding: 0;
}


/* =========================================================
   STATS DIVIDER
========================================================= */

.pt-ai-stat:not(:last-child)::after {
	content: "";

	position: absolute;

	right: -12px;
	top: 50%;

	width: 1px;
	height: 48px;

	transform: translateY(-50%);

	background: #E2E8F0;
}


/* =========================================================
   STAT ICON
========================================================= */

.pt-ai-stat__icon {
	flex: 0 0 56px;

	width: 56px;
	height: 56px;

	display: flex;

	align-items: center;
	justify-content: center;

	background: #FFFFFF;

	border: 1px solid #E98305;

	border-radius: 50%;

	box-shadow:
		0 4px 8px rgba(0, 78, 204, .05);
}

.pt-ai-stat__icon svg {
	width: 24px;
	height: 24px;

	stroke: #E98305;

	stroke-width: 1.6;

	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   STAT TEXT WRAPPER
========================================================= */

.pt-ai-stat > div:last-child {
	min-width: 0;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 2px;
}


/* =========================================================
   STAT NUMBER
========================================================= */

.pt-ai-stat strong {
	display: block;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 24px;
	line-height: 36px;

	font-weight: 800;

	letter-spacing: 0;

	color: #070707;

	white-space: nowrap;
}


/* =========================================================
   STAT LABEL
========================================================= */

.pt-ai-stat span {
	display: block;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 16px;
	line-height: 21px;

	font-weight: 400;

	color: #070707;

	white-space: nowrap;
}


/* =========================================================
   CONSULTATION ANCHOR
========================================================= */

.pt-ai-consultation-anchor {
	height: 1px;
}


/* =========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================= */

@media (max-width: 1100px) {

	.pt-ai-hero {
		min-height: 760px;
	}

	.pt-ai-hero__container {
		width: calc(100% - 60px);
		min-height: 760px;
	}

	.pt-ai-hero__content {
		width: 62%;

		padding-top: 75px;
	}

	.pt-ai-hero__content h1 {
		font-size: 48px;
		line-height: 60px;
	}

	.pt-ai-hero__description {
		width: 100%;
		max-width: 500px;

		font-size: 18px;
		line-height: 30px;
	}

	.pt-ai-hero__cta {
		margin-top: 28px;
	}

	.pt-ai-stats {
		width: calc(100% - 60px);

		height: 105px;

		bottom: 30px;

		padding: 22px 24px;

		border-radius: 20px;
	}

	.pt-ai-stats__inner {
		gap: 14px;
	}

	.pt-ai-stat {
		gap: 10px;
	}

	.pt-ai-stat__icon {
		flex: 0 0 48px;

		width: 48px;
		height: 48px;
	}

	.pt-ai-stat__icon svg {
		width: 22px;
		height: 22px;
	}

	.pt-ai-stat strong {
		font-size: 21px;
		line-height: 30px;
	}

	.pt-ai-stat span {
		font-size: 13px;
		line-height: 18px;
	}
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

	.pt-ai-hero {
		min-height: 760px;
	}

	.pt-ai-hero__background {
		background:
			linear-gradient(
				103.32deg,
				#FDFAF5 20%,
				rgba(255,255,255,.45) 65%,
				rgba(255,255,255,0) 100%
			),
			url("https://assets.primotech.com/wp-content/uploads/2026/09/image-1660685056-1.png")
			75% top / cover no-repeat;
	}

	.pt-ai-hero__container {
		width: calc(100% - 48px);

		min-height: 760px;
	}

	.pt-ai-hero__content {
		width: 65%;

		padding-top: 65px;
	}

	.pt-ai-hero__content h1 {
		font-size: 43px;
		line-height: 53px;
	}

	.pt-ai-hero__description {
		font-size: 18px;
		line-height: 28px;
	}

	.pt-ai-stats {
		width: calc(100% - 48px);

		height: auto;

		bottom: 28px;

		padding: 16px 20px;

		border-radius: 18px;
	}

	.pt-ai-stats__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		row-gap: 12px;
		column-gap: 20px;
	}

	.pt-ai-stat {
		min-height: 58px;
		height: 58px;
	}

	.pt-ai-stat__icon {
		flex: 0 0 48px;

		width: 48px;
		height: 48px;
	}

	.pt-ai-stat strong {
		font-size: 20px;
		line-height: 28px;
	}

	.pt-ai-stat span {
		font-size: 13px;
		line-height: 18px;
	}

	/*
	 * Horizontal separators for tablet.
	 */

	.pt-ai-stat:nth-child(1),
	.pt-ai-stat:nth-child(2) {
		padding-bottom: 10px;

		border-bottom: 1px solid #E2E8F0;
	}

	/*
	 * Remove vertical separators where necessary.
	 */

	.pt-ai-stat:nth-child(2)::after,
	.pt-ai-stat:nth-child(4)::after {
		display: none;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	/* -------------------------------------------------------
	   HERO
	------------------------------------------------------- */

	.pt-ai-hero {
		min-height: auto;

		background: #FDFAF5;

		overflow: visible;
	}


	/* -------------------------------------------------------
	   BACKGROUND
	------------------------------------------------------- */

	.pt-ai-hero__background {
		position: absolute;

		top: 0;
		right: 0;
		left: 0;

		height: 390px;

		background:
			linear-gradient(
				180deg,
				rgba(253,250,245,.25) 0%,
				rgba(253,250,245,.72) 65%,
				#FDFAF5 100%
			),
			url("https://assets.primotech.com/wp-content/uploads/2026/09/image-1660685056-1.png")
			center top / cover no-repeat;

		opacity: 1;
	}


	/* -------------------------------------------------------
	   CONTAINER
	------------------------------------------------------- */

	.pt-ai-hero__container {
		width: calc(100% - 32px);

		min-height: auto;
	}


	/* -------------------------------------------------------
	   CONTENT
	------------------------------------------------------- */

	.pt-ai-hero__content {
		width: 100%;

		padding-top: 40px;

		/*
		 * Important:
		 * Do NOT reserve fake space for the stats card.
		 */
		padding-bottom: 45px;
	}


	/* -------------------------------------------------------
	   HEADING
	------------------------------------------------------- */

	.pt-ai-hero__content h1 {
		width: 100%;
		max-width: 100%;

		font-size: clamp(34px, 9vw, 44px);

		line-height: 1.15;

		letter-spacing: -0.5px;
	}


	/* -------------------------------------------------------
	   DESCRIPTION
	------------------------------------------------------- */

	.pt-ai-hero__description {
		width: 100%;
		max-width: 100%;

		margin-top: 18px;

		font-size: 18px;

		line-height: 27px;
	}


	/* -------------------------------------------------------
	   CTA
	------------------------------------------------------- */

	.pt-ai-hero__cta {
		position: relative;

		z-index: 5;

		width: 100%;
		max-width: 295px;

		height: 51px;

		margin-top: 24px;

		padding: 15px 20px;

		font-size: 17px;

		line-height: 21px;
	}


	/* =======================================================
	   MOBILE STATS
	======================================================= */

	.pt-ai-stats {

		/*
		 * IMPORTANT:
		 * Mobile stats are now part of normal document flow.
		 * No absolute positioning.
		 * No negative margin.
		 */

		position: relative;

		left: auto;
		bottom: auto;

		width: calc(100% - 32px);

		height: auto;

		margin: 0 auto 32px;

		transform: none;

		padding: 7px 14px;

		background: rgba(255,255,255,.97);

		border: 1px solid #555;

		border-radius: 18px;

		box-shadow:
			0 5px 15px rgba(0,0,0,.04);

		backdrop-filter: none;
		-webkit-backdrop-filter: none;

		overflow: hidden;
	}


	/* -------------------------------------------------------
	   STATS INNER
	------------------------------------------------------- */

	.pt-ai-stats__inner {

		width: 100%;

		height: auto;

		display: flex;

		flex-direction: column;

		gap: 0;

		padding: 0;
	}


	/* -------------------------------------------------------
	   STAT ROW
	------------------------------------------------------- */

	.pt-ai-stat {

		position: relative;

		width: 100%;

		height: auto;

		min-height: 78px;

		display: flex;

		align-items: center;

		gap: 16px;

		padding: 10px 7px;

		border-bottom: 1px solid #E2E8F0;
	}

	.pt-ai-stat:last-child {
		border-bottom: 0;
	}


	/* -------------------------------------------------------
	   REMOVE DESKTOP DIVIDER
	------------------------------------------------------- */

	.pt-ai-stat:not(:last-child)::after {
		display: none;
	}


	/* -------------------------------------------------------
	   MOBILE ICON
	------------------------------------------------------- */

	.pt-ai-stat__icon {

		flex: 0 0 52px;

		width: 52px;
		height: 52px;

		display: flex;

		align-items: center;
		justify-content: center;

		background: #FFFFFF;

		border: 1px solid #E98305;

		border-radius: 50%;

		box-shadow:
			0 4px 8px rgba(0,78,204,.05);
	}

	.pt-ai-stat__icon svg {

		width: 23px;
		height: 23px;

		stroke: #E98305;

		stroke-width: 1.6;

		stroke-linecap: round;
		stroke-linejoin: round;
	}


	/* -------------------------------------------------------
	   TEXT GROUP
	------------------------------------------------------- */

	.pt-ai-stat > div:last-child {

		flex: 1;

		min-width: 0;

		display: flex;

		flex-direction: column;

		align-items: flex-start;

		gap: 0;
	}


	/* -------------------------------------------------------
	   MOBILE NUMBER
	------------------------------------------------------- */

	.pt-ai-stat strong {

		display: block;

		margin: 0;
		padding: 0;

		font-family: "Poppins", sans-serif;

		font-size: 22px;

		line-height: 30px;

		font-weight: 800;

		letter-spacing: 0;

		color: #070707;

		white-space: nowrap;
	}


	/* -------------------------------------------------------
	   MOBILE LABEL
	------------------------------------------------------- */

	.pt-ai-stat span {

		display: block;

		margin: 0;
		padding: 0;

		font-family: "Poppins", sans-serif;

		font-size: 15px;

		line-height: 21px;

		font-weight: 400;

		color: #070707;

		white-space: normal;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

	.pt-ai-hero__container {
		width: calc(100% - 28px);
	}


	/* -------------------------------------------------------
	   CONTENT
	------------------------------------------------------- */

	.pt-ai-hero__content {

		padding-top: 32px;

		padding-bottom: 38px;
	}


	/* -------------------------------------------------------
	   HEADING
	------------------------------------------------------- */

	.pt-ai-hero__content h1 {

		font-size: 33px;

		line-height: 1.16;

		letter-spacing: -0.3px;
	}


	/* -------------------------------------------------------
	   DESCRIPTION
	------------------------------------------------------- */

	.pt-ai-hero__description {

		font-size: 18px;

		line-height: 25px;
	}


	/* -------------------------------------------------------
	   CTA
	------------------------------------------------------- */

	.pt-ai-hero__cta {

		width: 100%;

		max-width: 295px;

		height: 48px;

		font-size: 16px;
	}


	/* -------------------------------------------------------
	   STATS
	------------------------------------------------------- */

	.pt-ai-stats {

		width: calc(100% - 28px);

		margin: 0 auto 28px;

		padding: 6px 12px;

		border-radius: 17px;
	}


	/* -------------------------------------------------------
	   STAT ROW
	------------------------------------------------------- */

	.pt-ai-stat {

		min-height: 76px;

		gap: 14px;

		padding: 10px 5px;
	}


	/* -------------------------------------------------------
	   ICON
	------------------------------------------------------- */

	.pt-ai-stat__icon {

		flex: 0 0 50px;

		width: 50px;
		height: 50px;
	}

	.pt-ai-stat__icon svg {

		width: 22px;
		height: 22px;
	}


	/* -------------------------------------------------------
	   NUMBER
	------------------------------------------------------- */

	.pt-ai-stat strong {

		font-size: 21px;

		line-height: 29px;
	}


	/* -------------------------------------------------------
	   LABEL
	------------------------------------------------------- */

	.pt-ai-stat span {

		font-size: 14px;

		line-height: 20px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

	.pt-ai-hero__content h1 {
		font-size: 31px;
	}

	.pt-ai-stat {
		gap: 12px;
	}

	.pt-ai-stat__icon {

		flex: 0 0 46px;

		width: 46px;
		height: 46px;
	}

	.pt-ai-stat__icon svg {
		width: 21px;
		height: 21px;
	}

	.pt-ai-stat strong {
		font-size: 20px;
		line-height: 28px;
	}

	.pt-ai-stat span {
		font-size: 13px;
		line-height: 19px;
	}
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pt-ai-hero__cta {
		transition: none;
	}
}

/* =========================================================
   AI CONSULTING SECTION
   Based on supplied Figma specifications
========================================================= */

.pt-ai-consulting-section {
	--pt-ai-consulting-orange: #E98305;
	--pt-ai-consulting-black: #070707;
	--pt-ai-consulting-background: #FFF9EC;

	width: 100%;

	margin: 0;
	padding: 100px;

	background: var(--pt-ai-consulting-background);

	font-family: "Poppins", sans-serif;

	color: var(--pt-ai-consulting-black);

	overflow: hidden;
}


/* =========================================================
   BOX SIZING
========================================================= */

.pt-ai-consulting-section *,
.pt-ai-consulting-section *::before,
.pt-ai-consulting-section *::after {
	box-sizing: border-box;
}


/* =========================================================
   MAIN CONTENT ROW
   Figma:
   width: 1440px
   height: 954px
   padding: 100px
   gap: 40px
========================================================= */

.pt-ai-consulting-container {
	width: 100%;
	max-width: 1240px;

	margin: 0 auto;

	display: flex;
	flex-direction: row;

	align-items: flex-start;

	gap: 40px;
}


/* =========================================================
   LEFT PROSE
   Figma:
   width: 585px
   height: 754px
   gap: 32px
========================================================= */

.pt-ai-consulting-left {
	flex: 1 1 585px;

	width: 585px;
	max-width: 585px;

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 32px;
}


/* =========================================================
   TITLE BLOCK
   Figma:
   width: 585px
   height: 168px
   gap: 16px
========================================================= */

.pt-ai-consulting-title-block {
	width: 100%;

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 16px;
}


/* =========================================================
   MAIN HEADLINE
   Figma:
   50px
   55px line-height
   700 weight
========================================================= */

.pt-ai-consulting-title {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 50px;
	line-height: 55px;

	font-weight: 700;

	letter-spacing: 0;

	background: linear-gradient(
		90deg,
		#070707 9.92%,
		#E98305 89.37%
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	background-clip: text;

	color: transparent;
}


/* =========================================================
   NARRATIVE STACK
   Figma:
   gap: 24px
========================================================= */

.pt-ai-consulting-narrative {
	width: 100%;

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	gap: 24px;
}


/* =========================================================
   COMMON PARAGRAPH
========================================================= */

.pt-ai-consulting-paragraph {
	width: 100%;

	display: flex;
	flex-direction: row;

	align-items: flex-start;

	gap: 16px;
}


/* =========================================================
   PARAGRAPH 1
   Figma:
   height: 128px
========================================================= */

.pt-ai-consulting-paragraph--accent:first-child {
	min-height: 128px;
}


/* =========================================================
   ORANGE ACCENT LINE
   Figma:
   width: 3px
========================================================= */

.pt-ai-consulting-accent-line {
	flex: 0 0 3px;

	width: 3px;

	height: 100%;

	min-height: 128px;

	background: #E98305;

	border-radius: 2px;
}


/* =========================================================
   NORMAL PARAGRAPH TEXT
   Figma:
   20px
   32px line-height
   400 weight
========================================================= */

.pt-ai-consulting-paragraph--accent p {
	flex: 1;

	width: auto;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;
	line-height: 32px;

	font-weight: 400;

	color: #000000;
}


/* =========================================================
   HIGHLIGHT BOX
   Figma:
   width 585px
   height 156px
   padding 20px
   gap 16px
   border 1px
   radius 12px
========================================================= */

.pt-ai-consulting-paragraph--box {
	min-height: 156px;

	padding: 20px;

	background: #FFFFFF;

	border: 1px solid #E98305;

	border-radius: 12px;
}


/* =========================================================
   HIGHLIGHT BOX TEXT
   Figma:
   18px
   29px line-height
========================================================= */

.pt-ai-consulting-paragraph--box p {
	flex: 1;

	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 18px;
	line-height: 29px;

	font-weight: 400;

	color: #000000;
}


/* =========================================================
   HIGHLIGHTED WORDS
========================================================= */

.pt-ai-consulting-paragraph--box strong {
	font-weight: 700;

	color: #E98305;
}


/* =========================================================
   PARAGRAPH 3
   Figma:
   height 160px
========================================================= */

.pt-ai-consulting-paragraph--accent:nth-child(3) {
	min-height: 160px;
}

.pt-ai-consulting-paragraph--accent:nth-child(3)
.pt-ai-consulting-accent-line {
	min-height: 160px;
}


/* =========================================================
   CLOSER
   Figma:
   padding top 8px
   height 38px
========================================================= */

.pt-ai-consulting-closer {
	width: 100%;

	min-height: 38px;

	padding: 8px 0 0;
}


/* =========================================================
   CLOSER TEXT
   Figma:
   20px
   30px
   600 weight
========================================================= */

.pt-ai-consulting-closer p {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 19.7px;
	line-height: 30px;

	font-weight: 600;

	color: #070707;
}


/* =========================================================
   ORANGE CLOSER TEXT
========================================================= */

.pt-ai-consulting-closer span {
	color: #E98305;

	font-weight: 600;
}


/* =========================================================
   RIGHT IMAGE
   Figma:
   width 615px
   height 703px
   radius 24px
========================================================= */

.pt-ai-consulting-image {
	flex: 0 0 615px;

	width: 615px;
	height: 703px;

	overflow: hidden;

	border-radius: 24px;

	line-height: 0;
}


/* =========================================================
   IMAGE
========================================================= */

.pt-ai-consulting-image img {
	display: block;

	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	object-fit: cover;

	object-position: center;

	border: 0;

	border-radius: 24px;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (max-width: 1300px) {

	.pt-ai-consulting-section {
		padding: 80px 60px;
	}

	.pt-ai-consulting-container {
		max-width: 1180px;

		gap: 35px;
	}

	.pt-ai-consulting-left {
		width: calc(100% - 580px);

		max-width: 585px;
	}

	.pt-ai-consulting-title {
		font-size: 46px;
		line-height: 52px;
	}

	.pt-ai-consulting-image {
		flex: 0 0 570px;

		width: 570px;
		height: 650px;
	}

	.pt-ai-consulting-paragraph--accent p {
		font-size: 18px;
		line-height: 30px;
	}

	.pt-ai-consulting-paragraph--box p {
		font-size: 17px;
		line-height: 28px;
	}

	.pt-ai-consulting-closer p {
		font-size: 18px;
		line-height: 28px;
	}
}


/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media (max-width: 1100px) {

	.pt-ai-consulting-section {
		padding: 70px 40px;
	}

	.pt-ai-consulting-container {
		gap: 30px;
	}

	.pt-ai-consulting-left {
		flex: 1 1 50%;

		width: 50%;
		max-width: none;
	}

	.pt-ai-consulting-image {
		flex: 1 1 50%;

		width: 50%;
		height: auto;

		aspect-ratio: 615 / 703;

		border-radius: 20px;
	}

	.pt-ai-consulting-image img {
		border-radius: 20px;
	}

	.pt-ai-consulting-title {
		font-size: 40px;
		line-height: 46px;
	}

	.pt-ai-consulting-left {
		gap: 26px;
	}

	.pt-ai-consulting-narrative {
		gap: 20px;
	}

	.pt-ai-consulting-paragraph--accent p {
		font-size: 16px;
		line-height: 27px;
	}

	.pt-ai-consulting-paragraph--accent:first-child {
		min-height: 0;
	}

	.pt-ai-consulting-paragraph--accent:nth-child(3) {
		min-height: 0;
	}

	.pt-ai-consulting-accent-line {
		min-height: 100%;
	}

	.pt-ai-consulting-paragraph--box {
		min-height: 0;
		padding: 17px;
	}

	.pt-ai-consulting-paragraph--box p {
		font-size: 15px;
		line-height: 24px;
	}

	.pt-ai-consulting-closer p {
		font-size: 16px;
		line-height: 25px;
	}
}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 900px) {

	.pt-ai-consulting-section {
		padding: 60px 32px;
	}

	.pt-ai-consulting-container {
		gap: 28px;
	}

	.pt-ai-consulting-title {
		font-size: 35px;
		line-height: 41px;
	}

	.pt-ai-consulting-paragraph {
		gap: 12px;
	}

	.pt-ai-consulting-paragraph--accent p {
		font-size: 15px;
		line-height: 24px;
	}

	.pt-ai-consulting-paragraph--box {
		padding: 15px;
	}

	.pt-ai-consulting-paragraph--box p {
		font-size: 14px;
		line-height: 22px;
	}

	.pt-ai-consulting-closer p {
		font-size: 14px;
		line-height: 22px;
	}
}


/* =========================================================
   MOBILE
   Image moves below content
========================================================= */

@media (max-width: 767px) {

	.pt-ai-consulting-section {
		width: 100%;

		padding: 50px 0 55px;

		background: #FFF9EC;
	}

	.pt-ai-consulting-container {
		width: calc(100% - 32px);
		max-width: none;

		margin: 0 auto;

		display: flex;

		flex-direction: column;

		gap: 35px;
	}

	/* -----------------------------------------------
	   LEFT
	----------------------------------------------- */

	.pt-ai-consulting-left {
		width: 100%;
		max-width: none;

		gap: 25px;
	}


	/* -----------------------------------------------
	   TITLE
	----------------------------------------------- */

	.pt-ai-consulting-title {
		width: 100%;

		font-size: 32px;

		line-height: 38px;

		letter-spacing: -0.3px;
	}


	/* -----------------------------------------------
	   NARRATIVE
	----------------------------------------------- */

	.pt-ai-consulting-narrative {
		width: 100%;

		gap: 20px;
	}


	/* -----------------------------------------------
	   ACCENT PARAGRAPH
	----------------------------------------------- */

	.pt-ai-consulting-paragraph--accent {
		width: 100%;

		gap: 12px;
	}

	.pt-ai-consulting-paragraph--accent p {

		font-size: 16px;

		line-height: 24px;
	}


	/* -----------------------------------------------
	   ACCENT LINE
	----------------------------------------------- */

	.pt-ai-consulting-accent-line {

		flex: 0 0 3px;

		width: 3px;

		min-height: 100%;

		height: auto;
	}


	/* -----------------------------------------------
	   HIGHLIGHT BOX
	----------------------------------------------- */

	.pt-ai-consulting-paragraph--box {

		width: 100%;

		min-height: 0;

		padding: 16px 14px;

		border-radius: 10px;
	}

	.pt-ai-consulting-paragraph--box p {

		font-size: 16px;

		line-height: 23px;
	}


	/* -----------------------------------------------
	   CLOSER
	----------------------------------------------- */

	.pt-ai-consulting-closer {

		width: 100%;

		min-height: 0;

		padding: 0;
	}

	.pt-ai-consulting-closer p {

		font-size: 16px;

		line-height: 24px;
	}


	/* -----------------------------------------------
	   IMAGE
	----------------------------------------------- */

	.pt-ai-consulting-image {

		order: 2;

		width: 100%;
		height: auto;

		aspect-ratio: 615 / 703;

		border-radius: 18px;
	}

	.pt-ai-consulting-image img {

		width: 100%;
		height: 100%;

		object-fit: cover;

		border-radius: 18px;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.pt-ai-consulting-section {
		padding: 42px 0 48px;
	}

	.pt-ai-consulting-container {
		width: calc(100% - 28px);

		gap: 30px;
	}

	.pt-ai-consulting-left {
		gap: 22px;
	}

	.pt-ai-consulting-title {
		font-size: 29px;

		line-height: 35px;
	}

	.pt-ai-consulting-narrative {
		gap: 18px;
	}

	.pt-ai-consulting-paragraph {
		gap: 10px;
	}

	.pt-ai-consulting-paragraph--accent p {
		font-size: 16px;

		line-height: 22px;
	}

	.pt-ai-consulting-paragraph--box {
		padding: 14px 12px;

		border-radius: 9px;
	}

	.pt-ai-consulting-paragraph--box p {
		font-size: 16px;

		line-height: 21px;
	}

	.pt-ai-consulting-closer p {
		font-size: 16px;

		line-height: 22px;
	}

	.pt-ai-consulting-image {
		border-radius: 15px;
	}

	.pt-ai-consulting-image img {
		border-radius: 15px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

	.pt-ai-consulting-section {
		padding: 36px 0 42px;
	}

	.pt-ai-consulting-container {
		width: calc(100% - 24px);
	}

	.pt-ai-consulting-title {
		font-size: 27px;

		line-height: 33px;
	}

	.pt-ai-consulting-paragraph--accent p {
		font-size: 16px;

		line-height: 21px;
	}

	.pt-ai-consulting-paragraph--box p {
		font-size: 16px;

		line-height: 20px;
	}

	.pt-ai-consulting-closer p {
		font-size: 16px;

		line-height: 21px;
	}

	.pt-ai-consulting-image {
		border-radius: 13px;
	}

	.pt-ai-consulting-image img {
		border-radius: 13px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pt-ai-consulting-section * {
		scroll-behavior: auto;
	}
}

/* =========================================================
   AI CONSULTING SERVICES
   FIGMA-BASED RESPONSIVE SECTION
========================================================= */

.pt-ai-services-section {
	--pt-ai-orange: #E98305;
	--pt-ai-orange-light: rgba(233, 131, 5, 0.0784314);
	--pt-ai-bg: #FFF9EC;
	--pt-ai-title: #070707;
	--pt-ai-card-title: #0F1E36;
	--pt-ai-text: #4B5563;
	--pt-ai-border: #E2E8F0;

	width: 100%;
	margin: 0;
	padding: 100px;

	background: var(--pt-ai-bg);

	border-top: 1px solid var(--pt-ai-border);
	border-bottom: 1px solid var(--pt-ai-border);

	font-family: "Poppins", sans-serif;

	color: var(--pt-ai-title);

	overflow: hidden;
}


/* =========================================================
   BOX SIZING
========================================================= */

.pt-ai-services-section *,
.pt-ai-services-section *::before,
.pt-ai-services-section *::after {
	box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER
   FIGMA:
   Width: 1240px
========================================================= */

.pt-ai-services-container {
	width: 100%;
	max-width: 1240px;

	margin: 0 auto;
}


/* =========================================================
   SECTION HEADING
   FIGMA:
   Width: 1240px
   Height: 112px
   Gap: 16px
========================================================= */

.pt-ai-services-header {
	width: 100%;
	height: auto;

	display: flex;
	flex-direction: column;

	align-items: center;

	gap: 16px;

	margin: 0 0 32px;
}


/* =========================================================
   SECTION TITLE
   FIGMA:
   50px
   line-height: 75px
   weight: 700
========================================================= */

.pt-ai-services-title {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 50px;
	line-height: 75px;

	font-weight: 700;

	text-align: center;

	letter-spacing: 0;

	background: linear-gradient(
		90deg,
		#070707 9.92%,
		#E98305 89.37%
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	background-clip: text;

	color: transparent;
}


/* =========================================================
   SUBTITLE
   FIGMA:
   20px / 32px
========================================================= */

.pt-ai-services-subtitle {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 24px;
	line-height: 32px;

	font-weight: 400;

	text-align: center;

	color: #4B5563;
}


/* =========================================================
   SERVICES GRID
   FIGMA:
   Width: 1240px
   Height: 756px
   Gap: 12px
   4 columns
========================================================= */

.pt-ai-services-grid {
	width: 100%;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));


	gap: 12px;

	align-items: start;
}


/* =========================================================
   SERVICE CARD
   FIGMA:
   Width: 300px
   Height: 372px
   Padding: 24px
   Gap: 16px
   Radius: 16px
========================================================= */

.pt-ai-service-card {
	width: 100%;
	height: 340px;

	min-width: 0;

	display: flex;
	flex-direction: column;

	align-items: flex-start;

	padding: 24px;

	gap: 16px;

	background: #FFFFFF;

	border: 1px solid #E2E8F0;

	border-radius: 16px;

	box-shadow:
		0px 12px 28px -12px rgba(0, 0, 0, 0.0509804);

	overflow: hidden;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}


/* Optional hover effect */

.pt-ai-service-card:hover {
	/* transform: translateY(-2px);
	box-shadow: 0px 16px 32px -12px rgba(0, 0, 0, 0.10); */
    cursor: pointer;
    box-shadow: 0 0 6px 0 #e98305;
}


/* =========================================================
   ICON CONTAINER
   FIGMA:
   48px × 48px
   Radius: 12px
========================================================= */

.pt-ai-service-icon {
	width: 48px;
	height: 48px;

	min-width: 48px;
	min-height: 48px;

	flex: 0 0 48px;

	display: flex;

	align-items: center;
	justify-content: center;

	padding: 0;

	background: var(--pt-ai-orange-light);

	border-radius: 12px;
}


/* =========================================================
   SVG ICON
========================================================= */

.pt-ai-service-icon svg {
	display: block;

	width: 20px;
	height: 20px;

	fill: none;

	stroke: var(--pt-ai-orange);

	stroke-width: 2;

	stroke-linecap: round;
	stroke-linejoin: round;
}


/* =========================================================
   CARD TITLE
   FIGMA:
   Width: 252px
   20px / 30px
   Weight: 700
========================================================= */

.pt-ai-service-card h3 {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;
	line-height: 30px;

	font-weight: 700;

	color: #0F1E36;

	letter-spacing: 0;
}


/* =========================================================
   CARD DESCRIPTION
   FIGMA:
   Width: 252px
   18px / 27px
   Weight: 400
========================================================= */

.pt-ai-service-card p {
	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;
	line-height: 30px;

	font-weight: 400;

	color: #4B5563;

	letter-spacing: 0;
}


/* =========================================================
   INDIVIDUAL CARD TITLE HEIGHTS
   These follow the Figma layers.
========================================================= */

/* AI Readiness Assessment */
/* .pt-ai-service-card:nth-child(1) h3 {
	min-height: 60px;
} */

/* AI Strategy Development */
/* .pt-ai-service-card:nth-child(2) h3 {
	min-height: 60px;
} */

/* Generative AI Consulting */
/* .pt-ai-service-card:nth-child(3) h3 {
	min-height: 60px;
} */

/* AI Solution Design & Architecture */
/* .pt-ai-service-card:nth-child(4) h3 {
	min-height: 60px;
} */

/* AI Integration Consulting */
/* .pt-ai-service-card:nth-child(5) h3 {
	min-height: 60px;
} */

/* AI Governance Consulting */
/* .pt-ai-service-card:nth-child(6) h3 {
	min-height: 60px;
} */

/* AI Performance Monitoring & Optimization */
/* .pt-ai-service-card:nth-child(7) h3 {
	min-height: 90px;
} */

/* Data Engineering for AI */
/* .pt-ai-service-card:nth-child(8) h3 {
	min-height: 30px;
} */


/* =========================================================
   DESKTOP - 1440px
========================================================= */

@media (min-width: 1201px) {

	.pt-ai-services-section {
		padding: 100px;
	}

	.pt-ai-services-container {
		max-width: 1240px;
	}

	.pt-ai-services-header {
		margin-bottom: 32px;
	}

	.pt-ai-services-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));


		gap: 12px;
	}

	.pt-ai-service-card {
		height: 340px;
		padding: 24px;
		gap: 16px;
	}

	.pt-ai-service-icon {
		width: 48px;
		height: 48px;
		flex-basis: 48px;
	}

	.pt-ai-service-card h3 {
		font-size: 20px;
		line-height: 30px;
	}

	.pt-ai-service-card p {
		font-size: 18px;
		line-height: 30px;
	}
}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) and (min-width: 1001px) {

	.pt-ai-services-section {
		padding: 70px 50px;
	}

	.pt-ai-services-container {
		max-width: 1100px;
	}

	.pt-ai-services-title {
		font-size: 44px;
		line-height: 60px;
	}

	.pt-ai-services-subtitle {
		font-size: 18px;
		line-height: 28px;
	}

	.pt-ai-services-grid {
		grid-template-columns:
			repeat(3, minmax(0, 1fr));


		gap: 12px;
	}

	.pt-ai-service-card {
		height: 340px;

		padding: 20px;

		gap: 14px;

		border-radius: 14px;
	}

	.pt-ai-service-icon {
		width: 44px;
		height: 44px;

		min-width: 44px;
		min-height: 44px;

		flex-basis: 44px;

		border-radius: 10px;
	}

	.pt-ai-service-card h3 {
		font-size: 17px;
		line-height: 25px;
	}

	.pt-ai-service-card p {
		font-size: 15px;
		line-height: 23px;
	}

	.pt-ai-service-card:nth-child(7) h3 {
		min-height: 75px;
	}

	.pt-ai-service-card:nth-child(8) h3 {
		min-height: 25px;
	}
}


/* =========================================================
   TABLET LANDSCAPE
   2 COLUMNS
========================================================= */

@media (max-width: 1000px) {

	.pt-ai-services-section {
		padding: 65px 40px;
	}

	.pt-ai-services-container {
		max-width: 800px;
	}

	.pt-ai-services-header {
		margin-bottom: 30px;
	}

	.pt-ai-services-title {
		font-size: 40px;
		line-height: 52px;
	}

	.pt-ai-services-subtitle {
		font-size: 18px;
		line-height: 28px;
	}

	.pt-ai-services-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-auto-rows: auto;

		gap: 16px;
	}

	.pt-ai-service-card {
		width: 100%;
		height: auto;

		min-height: 320px;

		padding: 22px;

		gap: 15px;

		border-radius: 15px;
	}

	.pt-ai-service-icon {
		width: 46px;
		height: 46px;

		min-width: 46px;
		min-height: 46px;

		flex-basis: 46px;

		border-radius: 11px;
	}

	.pt-ai-service-card h3 {
		font-size: 18px;
		line-height: 27px;

		min-height: auto !important;
	}

	.pt-ai-service-card p {
		font-size: 16px;
		line-height: 24px;
	}
}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 767px) and (min-width: 601px) {

	.pt-ai-services-section {
		padding: 55px 32px;
	}

	.pt-ai-services-container {
		max-width: 700px;
	}

	.pt-ai-services-title {
		font-size: 36px;
		line-height: 48px;
	}

	.pt-ai-services-subtitle {
		font-size: 18px;
		line-height: 28px;
	}

	.pt-ai-services-grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 14px;
	}

	.pt-ai-service-card {
		min-height: 300px;

		padding: 20px;

		gap: 14px;
	}

	.pt-ai-service-icon {
		width: 44px;
		height: 44px;

		min-width: 44px;
		min-height: 44px;

		flex-basis: 44px;
	}

	.pt-ai-service-card h3 {
		font-size: 17px;
		line-height: 25px;
	}

	.pt-ai-service-card p {
		font-size: 16px;
		line-height: 22px;
	}
}


/* =========================================================
   MOBILE
   1 COLUMN
========================================================= */

@media (max-width: 600px) {

	.pt-ai-services-section {
		padding: 45px 0 50px;
	}

	.pt-ai-services-container {
		width: calc(100% - 32px);
		max-width: none;

		margin: 0 auto;
	}


	/* -------------------------------------------------------
	   HEADER
	------------------------------------------------------- */

	.pt-ai-services-header {
		width: 100%;

		margin-bottom: 26px;

		gap: 10px;
	}

	.pt-ai-services-title {
		width: 100%;

		font-size: 30px;
		line-height: 39px;

		letter-spacing: -0.4px;
	}

	.pt-ai-services-subtitle {
		width: 100%;

		font-size: 18px;
		line-height: 28px;
	}


	/* -------------------------------------------------------
	   GRID
	------------------------------------------------------- */

	.pt-ai-services-grid {
		width: 100%;

		display: grid;

		grid-template-columns: 1fr;

		grid-auto-rows: auto;

		gap: 14px;
	}


	/* -------------------------------------------------------
	   CARD
	------------------------------------------------------- */

	.pt-ai-service-card {
		width: 100%;
		height: auto;

		min-height: 0;

		padding: 20px;

		gap: 14px;

		border-radius: 14px;

		overflow: visible;
	}


	/* -------------------------------------------------------
	   ICON
	------------------------------------------------------- */

	.pt-ai-service-icon {
		width: 46px;
		height: 46px;

		min-width: 46px;
		min-height: 46px;

		flex: 0 0 46px;

		border-radius: 11px;
	}

	.pt-ai-service-icon svg {
		width: 20px;
		height: 20px;
	}


	/* -------------------------------------------------------
	   TITLE
	------------------------------------------------------- */

	.pt-ai-service-card h3 {
		width: 100%;

		margin: 0;

		min-height: 0 !important;

		font-size: 18px;

		line-height: 27px;
	}


	/* -------------------------------------------------------
	   DESCRIPTION
	------------------------------------------------------- */

	.pt-ai-service-card p {
		width: 100%;

		margin: 0;

		font-size: 16px;

		line-height: 23px;
	}
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

	.pt-ai-services-section {
		padding: 38px 0 44px;
	}

	.pt-ai-services-container {
		width: calc(100% - 28px);
	}


	/* Header */

	.pt-ai-services-header {
		margin-bottom: 22px;

		gap: 8px;
	}

	.pt-ai-services-title {
		font-size: 27px;

		line-height: 35px;
	}

	.pt-ai-services-subtitle {
		font-size: 18px;

		line-height: 28px;
	}


	/* Grid */

	.pt-ai-services-grid {
		gap: 12px;
	}


	/* Card */

	.pt-ai-service-card {
		padding: 17px;

		gap: 12px;

		border-radius: 12px;
	}


	/* Icon */

	.pt-ai-service-icon {
		width: 44px;
		height: 44px;

		min-width: 44px;
		min-height: 44px;

		flex-basis: 44px;

		border-radius: 10px;
	}

	.pt-ai-service-icon svg {
		width: 19px;
		height: 19px;
	}


	/* Title */

	.pt-ai-service-card h3 {
		font-size: 16px;

		line-height: 24px;
	}


	/* Description */

	.pt-ai-service-card p {
		font-size: 16px;

		line-height: 22px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 360px) {

	.pt-ai-services-container {
		width: calc(100% - 24px);
	}

	.pt-ai-services-title {
		font-size: 25px;

		line-height: 32px;
	}

	.pt-ai-services-subtitle {
		font-size: 18px;

		line-height: 28px;
	}

	.pt-ai-service-card {
		padding: 15px;

		gap: 11px;
	}

	.pt-ai-service-icon {
		width: 42px;
		height: 42px;

		min-width: 42px;
		min-height: 42px;

		flex-basis: 42px;
	}

	.pt-ai-service-icon svg {
		width: 18px;
		height: 18px;
	}

	.pt-ai-service-card h3 {
		font-size: 15px;

		line-height: 22px;
	}

	.pt-ai-service-card p {
		font-size: 16px;

		line-height: 20px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pt-ai-service-card {
		transition: none;
	}
}

/* =========================================================
   WHO WE ADVISE
   Figma-based responsive implementation
========================================================= */

.pt-who-we-advise {

	--pt-who-blue: #143A62;
	--pt-who-card-bg: #FFFFFF;
	--pt-who-title: #FFFFFF;
	--pt-who-text: #4B5563;
	--pt-who-border: rgba(174, 174, 174, 0.4);

	position: relative;

	width: 100%;

	margin: 0;

	padding: 100px;

	background: var(--pt-who-blue);

	overflow: hidden;

	isolation: isolate;

	font-family: "Poppins", sans-serif;
}


/* =========================================================
   BOX SIZING
========================================================= */

.pt-who-we-advise *,
.pt-who-we-advise *::before,
.pt-who-we-advise *::after {
	box-sizing: border-box;
}


/* =========================================================
   BACKGROUND
   Replace URL with the actual Figma background asset.
========================================================= */

.pt-who-we-advise__background {

	position: absolute;

	inset: 0;

	z-index: -2;

	background-color: #143A62;

	background-image:
		url("https://assets.primotech.com/wp-content/uploads/2026/09/image-1660685045.png");

	background-position: center;

	background-repeat: no-repeat;

	background-size: cover;
}


/*
   Dark overlay.

   This keeps the blue appearance of the Figma
   while allowing the background artwork to remain visible.
*/

.pt-who-we-advise::after {

	content: "";

	position: absolute;

	inset: 0;

	z-index: -1;

	background: rgba(20, 58, 98, 0.35);

	pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   Figma:
   1440px section
   100px left/right padding
   1240px content
========================================================= */

.pt-who-we-advise__container {

	position: relative;

	width: 100%;

	max-width: 1240px;

	margin: 0 auto;
}


/* =========================================================
   HEADER
   Figma:
   Width: 927px
   Heading + paragraph
========================================================= */

.pt-who-we-advise__header {

	width: min(927px, 100%);

	margin: 0 auto 42px;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 26px;

	text-align: center;
}


/* =========================================================
   TITLE
   Figma:
   50px
   line-height: 52px
   weight: 700
========================================================= */

.pt-who-we-advise__title {

	width: 100%;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 50px;

	line-height: 52px;

	font-weight: 700;

	color: #FFFFFF;

	text-align: center;

	letter-spacing: -0.8px;
}


/* =========================================================
   INTRO
   Figma:
   20px
   line-height: 34px
========================================================= */

.pt-who-we-advise__intro {

	width: 100%;

	max-width: 927px;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 24px;

	line-height: 34px;

	font-weight: 400;

	color: #FFFFFF;

	text-align: center;
}


/* =========================================================
   CARD GRID
   Figma:
   Width: 1240px
   3 cards
   Gap approximately 24px
========================================================= */

.pt-who-we-advise__cards {

	width: 100%;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 24px;

	align-items: stretch;
}


/* =========================================================
   CARD
   Figma:
   397/398px width
   591px height
   padding 24px
   gap 24px
   radius 12px
========================================================= */

.pt-who-we-advise__card {

	width: 100%;

	min-width: 0;

	display: flex;

	flex-direction: column;

	align-items: flex-start;

	padding: 24px;

	gap: 24px;

	background: #FFFFFF;

	border: 1px solid var(--pt-who-border);

	border-radius: 12px;

	overflow: hidden;

	box-shadow:
		0 8px 24px rgba(0, 0, 0, 0.06);
}


/* =========================================================
   IMAGE WRAPPER
========================================================= */

.pt-who-we-advise__image-wrap {

	position: relative;

	width: 100%;

	height: 286px;

	flex: 0 0 286px;

	overflow: hidden;

	border-radius: 12px;

	background: #F5F7FA;
}


/* =========================================================
   CARD IMAGE
========================================================= */

.pt-who-we-advise__image {

	display: block;

	width: 100%;

	height: 100%;

	object-fit: cover;

	object-position: center;

	border-radius: 12px;
}


/* =========================================================
   CARD TITLE
   Figma:
   24px
   line-height: 140%
   weight 700
========================================================= */

.pt-who-we-advise__card-title {

	width: 100%;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 24px;

	line-height: 34px;

	font-weight: 700;

	color: #000000;

	letter-spacing: 0;
}


/* =========================================================
   CARD DESCRIPTION
   Figma:
   18px
   line-height: 150%
========================================================= */

.pt-who-we-advise__card-text {

	width: 100%;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;

	line-height: 30px;

	font-weight: 400;

	color: #4B5563;

	letter-spacing: 0;
}


/* =========================================================
   LARGE DESKTOP
   1201px+
========================================================= */

@media (min-width: 1201px) {

	.pt-who-we-advise {

		padding: 100px;
	}

	.pt-who-we-advise__container {

		max-width: 1240px;
	}

	.pt-who-we-advise__header {

		margin-bottom: 42px;
	}

	.pt-who-we-advise__cards {

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		gap: 24px;
	}

	.pt-who-we-advise__card {

		padding: 24px;

		gap: 24px;
	}

	.pt-who-we-advise__image-wrap {

		height: 286px;

		flex-basis: 286px;
	}
}


/* =========================================================
   SMALL DESKTOP
   1001px - 1200px
========================================================= */

@media (max-width: 1200px) and (min-width: 1001px) {

	.pt-who-we-advise {

		padding: 75px 50px;
	}

	.pt-who-we-advise__container {

		max-width: 1100px;
	}

	.pt-who-we-advise__header {

		max-width: 850px;

		margin-bottom: 38px;
	}

	.pt-who-we-advise__title {

		font-size: 44px;

		line-height: 50px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 30px;
	}

	.pt-who-we-advise__cards {

		gap: 18px;
	}

	.pt-who-we-advise__card {

		height: 530px;

		padding: 20px;

		gap: 20px;

		border-radius: 12px;
	}

	.pt-who-we-advise__image-wrap {

		height: 245px;

		flex-basis: 245px;
	}

	.pt-who-we-advise__card-title {

		font-size: 21px;

		line-height: 30px;
	}

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 25px;
	}
}


/* =========================================================
   TABLET LANDSCAPE
   769px - 1000px
========================================================= */

@media (max-width: 1000px) and (min-width: 769px) {

	.pt-who-we-advise {

		padding: 65px 40px;
	}

	.pt-who-we-advise__container {

		max-width: 850px;
	}

	.pt-who-we-advise__header {

		max-width: 750px;

		margin-bottom: 35px;

		gap: 20px;
	}

	.pt-who-we-advise__title {

		font-size: 40px;

		line-height: 48px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 28px;
	}

	/*
	   Two-column tablet layout
	*/

	.pt-who-we-advise__cards {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 18px;
	}

	.pt-who-we-advise__card {

		height: auto;

		min-height: 540px;

		padding: 20px;

		gap: 20px;
	}

	.pt-who-we-advise__image-wrap {

		height: 250px;

		flex-basis: 250px;
	}

	.pt-who-we-advise__card-title {

		font-size: 21px;

		line-height: 30px;
	}

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 25px;
	}
}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
========================================================= */

@media (max-width: 768px) and (min-width: 601px) {

	.pt-who-we-advise {

		padding: 55px 32px;
	}

	.pt-who-we-advise__container {

		max-width: 700px;
	}

	.pt-who-we-advise__header {

		margin-bottom: 32px;

		gap: 18px;
	}

	.pt-who-we-advise__title {

		font-size: 36px;

		line-height: 44px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 26px;
	}

	.pt-who-we-advise__cards {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 14px;
	}

	.pt-who-we-advise__card {

		height: auto;

		min-height: 480px;

		padding: 18px;

		gap: 18px;
	}

	.pt-who-we-advise__image-wrap {

		height: 220px;

		flex-basis: 220px;
	}

	.pt-who-we-advise__card-title {

		font-size: 19px;

		line-height: 28px;
	}

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 23px;
	}
}


/* =========================================================
   MOBILE
   <= 600px
========================================================= */

@media (max-width: 600px) {

	.pt-who-we-advise {

		padding: 45px 0 50px;
	}

	.pt-who-we-advise__container {

		width: calc(100% - 32px);

		max-width: none;

		margin: 0 auto;
	}


	/* ---------------------------------------------
	   HEADER
	--------------------------------------------- */

	.pt-who-we-advise__header {

		width: 100%;

		margin-bottom: 28px;

		gap: 14px;
	}

	.pt-who-we-advise__title {

		font-size: 32px;

		line-height: 40px;

		letter-spacing: -0.4px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 24px;
	}


	/* ---------------------------------------------
	   CARDS
	--------------------------------------------- */

	.pt-who-we-advise__cards {

		grid-template-columns: 1fr;

		gap: 18px;
	}


	/* ---------------------------------------------
	   CARD
	--------------------------------------------- */

	.pt-who-we-advise__card {

		width: 100%;

		height: auto;

		min-height: 0;

		padding: 18px;

		gap: 18px;

		border-radius: 12px;
	}


	/* ---------------------------------------------
	   IMAGE
	--------------------------------------------- */

	.pt-who-we-advise__image-wrap {

		width: 100%;

		height: auto;

		aspect-ratio: 1.215 / 1;

		flex: none;

		border-radius: 10px;
	}

	.pt-who-we-advise__image {

		width: 100%;

		height: 100%;

		object-fit: cover;
	}


	/* ---------------------------------------------
	   CARD TITLE
	--------------------------------------------- */

	.pt-who-we-advise__card-title {

		font-size: 21px;

		line-height: 29px;
	}


	/* ---------------------------------------------
	   CARD TEXT
	--------------------------------------------- */

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 23px;
	}
}


/* =========================================================
   SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

	.pt-who-we-advise {

		padding: 38px 0 44px;
	}

	.pt-who-we-advise__container {

		width: calc(100% - 28px);
	}


	/* Header */

	.pt-who-we-advise__header {

		margin-bottom: 24px;

		gap: 12px;
	}

	.pt-who-we-advise__title {

		font-size: 28px;

		line-height: 36px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 22px;
	}


	/* Cards */

	.pt-who-we-advise__cards {

		gap: 14px;
	}

	.pt-who-we-advise__card {

		padding: 16px;

		gap: 16px;
	}


	/* Image */

	.pt-who-we-advise__image-wrap {

		border-radius: 9px;
	}


	/* Title */

	.pt-who-we-advise__card-title {

		font-size: 19px;

		line-height: 27px;
	}


	/* Text */

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 22px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
   <= 360px
========================================================= */

@media (max-width: 360px) {

	.pt-who-we-advise {

		padding-top: 32px;

		padding-bottom: 38px;
	}

	.pt-who-we-advise__container {

		width: calc(100% - 24px);
	}

	.pt-who-we-advise__title {

		font-size: 26px;

		line-height: 33px;
	}

	.pt-who-we-advise__intro {

		font-size: 18px;

		line-height: 21px;
	}

	.pt-who-we-advise__card {

		padding: 14px;

		gap: 14px;
	}

	.pt-who-we-advise__card-title {

		font-size: 18px;

		line-height: 26px;
	}

	.pt-who-we-advise__card-text {

		font-size: 16px;

		line-height: 21px;
	}
}


/* =========================================================
   ACCESSIBILITY / REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pt-who-we-advise__card {

		transition: none;
	}
}

/* =========================================================
   WHAT SETS OUR CONSULTING APPROACH APART
   Figma-based responsive implementation
========================================================= */

.pt-consulting-approach {

	--pt-approach-orange: #E98305;
	--pt-approach-black: #070707;
	--pt-approach-text: #4B5563;
	--pt-approach-border: #E2E8F0;
	--pt-approach-bg: #FFFFFF;

	position: relative;

	width: 100%;

	margin: 0;
	padding: 100px;

	background: #FFFFFF;

	font-family: "Poppins", sans-serif;

	overflow: hidden;
}


/* =========================================================
   BOX SIZING
========================================================= */

.pt-consulting-approach *,
.pt-consulting-approach *::before,
.pt-consulting-approach *::after {
	box-sizing: border-box;
}


/* =========================================================
   MAIN CONTAINER
   FIGMA:
   Width: 1240px
   Max width: 1280px
========================================================= */

.pt-consulting-approach__container {

	width: 100%;

	max-width: 1240px;

	margin: 0 auto;

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 42px;
}


/* =========================================================
   HEADER
   FIGMA:
   Width: 768px
   Gap: 24px
========================================================= */

.pt-consulting-approach__header {

	width: min(768px, 100%);

	display: flex;

	flex-direction: column;

	align-items: center;

	gap: 24px;

	text-align: center;
}


/* =========================================================
   TITLE
   FIGMA:
   50px
   55px
   700
========================================================= */

.pt-consulting-approach__title {

	width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 50px;

	line-height: 55px;

	font-weight: 700;

	text-align: center;

	letter-spacing: 0;

	background: linear-gradient(
		90deg,
		#070707 9.92%,
		#E98305 89.37%
	);

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	background-clip: text;

	color: transparent;
}


/* =========================================================
   SUBTITLE
   FIGMA:
   20px
   34px
========================================================= */

.pt-consulting-approach__subtitle {

	width: 848px;

	max-width: 100%;

	margin: 0;
	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 20px;

	line-height: 34px;

	font-weight: 400;

	color: #070707;

	text-align: center;
}


/* =========================================================
   BENTO GRID
   FIGMA:
   1240px × 704px
   3 columns
   24px horizontal/vertical gap
========================================================= */

.pt-consulting-approach__grid {

	width: 100%;

	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	grid-template-rows:
		324px 356px;

	column-gap: 24px;

	row-gap: 24px;

	align-items: stretch;
}


/* =========================================================
   CARD
   FIGMA:
   Padding: 32px
   Gap: 24px
   Radius: 8px
========================================================= */

.pt-consulting-approach__card {
	position: relative;

	width: 100%;
	height: 100%;
	min-width: 0;

	display: flex;
	flex-direction: column;
	align-items: flex-start;

	padding: 32px;
	gap: 24px;

	border: 1px solid transparent;
	border-radius: 8px;

	/* Gradient border */
	background:
		linear-gradient(#FFFFFF, #FFFFFF) padding-box,
		linear-gradient(
			90deg,
			#070707 0%,
			#E98305 100%
		) border-box;

	overflow: hidden;
	cursor: default;

	transition:
		color 0.45s ease,
		transform 0.35s ease,
		box-shadow 0.45s ease;
}


/* =========================================
   SMOOTH GRADIENT HOVER BACKGROUND
========================================= */

.pt-consulting-approach__card::before {

	content: "";

	position: absolute;

	inset: 0;

	z-index: 0;

	border-radius: inherit;

	background: linear-gradient(
		90deg,
		#070707 0%,
		#E98305 100%
	);

	opacity: 0;

	transition:
		opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);

	pointer-events: none;
}


/* =========================================
   KEEP CONTENT ABOVE GRADIENT
========================================= */

.pt-consulting-approach__card > * {

	position: relative;

	z-index: 1;
}


/* =========================================
   HOVER
========================================= */

.pt-consulting-approach__card:hover::before,
.pt-consulting-approach__card:focus-within::before {

	opacity: 1;
}


/* =========================================
   HOVER SHADOW
========================================= */

.pt-consulting-approach__card:hover,
.pt-consulting-approach__card:focus-within {

	color: #FFFFFF;

	box-shadow:
		0 14px 32px rgba(7, 7, 7, 0.14);
}


/* =========================================================
   ICON BOX
   FIGMA:
   48 × 48
   Radius: 4px
========================================================= */

.pt-consulting-approach__icon-box {

	width: 48px;

	height: 48px;

	min-width: 48px;

	min-height: 48px;

	flex: 0 0 48px;

	display: flex;

	align-items: center;

	justify-content: center;

	background: linear-gradient(
		90deg,
		rgba(7, 7, 7, 0.2) 0%,
		rgba(233, 131, 5, 0.2) 100%
	);

	border-radius: 4px;

	transition:
		background 0.35s ease;
}


/* Active card icon */

.pt-consulting-approach__card--active .pt-consulting-approach__icon-box {

	background: #FFFFFF;
}


/* Hover icon */

.pt-consulting-approach__card:hover
.pt-consulting-approach__icon-box,
.pt-consulting-approach__card:focus-within
.pt-consulting-approach__icon-box {

	background: #FFFFFF;
}


/* =========================================================
   ICON
========================================================= */

.pt-consulting-approach__icon-box svg {

	display: block;

	width: 20px;

	height: 20px;

	fill: none;

	stroke: url("#pt-approach-icon-gradient");

	stroke: var(--pt-approach-orange);

	stroke-width: 1.8;

	stroke-linecap: round;

	stroke-linejoin: round;

	transition:
		stroke 0.35s ease;
}


/* Keep icon orange on white */

.pt-consulting-approach__card:hover
.pt-consulting-approach__icon-box svg,
.pt-consulting-approach__card--active
.pt-consulting-approach__icon-box svg {

	stroke: var(--pt-approach-orange);
}


/* =========================================================
   CARD TITLE
   FIGMA:
   24px
   32px
   Weight 600
========================================================= */

.pt-consulting-approach__card h3 {

	width: 100%;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 24px;

	line-height: 32px;

	font-weight: 600;

	letter-spacing: -0.24px;

	color: #000000;

	transition:
		color 0.35s ease;
}


/* White title on active / hover */

.pt-consulting-approach__card--active h3,
.pt-consulting-approach__card:hover h3,
.pt-consulting-approach__card:focus-within h3 {

	color: #FFFFFF;
}


/* =========================================================
   CARD DESCRIPTION
   FIGMA:
   16px
   160%
========================================================= */

.pt-consulting-approach__card p {

	width: 100%;

	margin: 0;

	padding: 0;

	font-family: "Poppins", sans-serif;

	font-size: 16px;

	line-height: 160%;

	font-weight: 400;

	color: #4B5563;

	transition:
		color 0.35s ease;
}


/* White description on active / hover */

.pt-consulting-approach__card--active p,
.pt-consulting-approach__card:hover p,
.pt-consulting-approach__card:focus-within p {

	color: #FFFFFF;
}


/* =========================================================
   ACTIVE CARD
   Matches Figma Item 6
========================================================= */

.pt-consulting-approach__card--active {

	padding: 40px;

	background: linear-gradient(
		90deg,
		#070707 0%,
		#E98305 100%
	);
}


/* Active icon */

.pt-consulting-approach__card--active
.pt-consulting-approach__icon-box {

	background: #FFFFFF;
}


/* =========================================================
   DESKTOP
   >= 1201px
========================================================= */

@media (min-width: 1201px) {

	.pt-consulting-approach {

		padding: 100px;
	}

	.pt-consulting-approach__container {

		max-width: 1240px;

		gap: 42px;
	}

	.pt-consulting-approach__grid {

		grid-template-columns:
			repeat(3, minmax(0, 1fr));

		grid-template-rows:
			324px 356px;

		gap: 24px;
	}

	.pt-consulting-approach__card {

		padding: 32px;

		gap: 24px;
	}

	.pt-consulting-approach__card--active {

		padding: 40px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 24px;

		line-height: 32px;
	}

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 25.6px;
	}
}


/* =========================================================
   SMALL DESKTOP
   1001px - 1200px
========================================================= */

@media (max-width: 1200px) and (min-width: 1001px) {

	.pt-consulting-approach {

		padding: 75px 50px;
	}

	.pt-consulting-approach__container {

		max-width: 1100px;

		gap: 36px;
	}

	.pt-consulting-approach__header {

		max-width: 720px;
	}

	.pt-consulting-approach__title {

		font-size: 44px;

		line-height: 50px;
	}

	.pt-consulting-approach__subtitle {

		font-size: 18px;

		line-height: 30px;
	}

	.pt-consulting-approach__grid {

		grid-template-rows:
			300px 330px;

		gap: 18px;
	}

	.pt-consulting-approach__card {

		padding: 24px;

		gap: 18px;
	}

	.pt-consulting-approach__card--active {

		padding: 28px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 21px;

		line-height: 29px;
	}

	.pt-consulting-approach__card p {

		font-size: 15px;

		line-height: 24px;
	}
}


/* =========================================================
   TABLET
   769px - 1000px
========================================================= */

@media (max-width: 1000px) and (min-width: 769px) {

	.pt-consulting-approach {

		padding: 65px 40px;
	}

	.pt-consulting-approach__container {

		max-width: 850px;

		gap: 32px;
	}

	.pt-consulting-approach__header {

		max-width: 700px;

		gap: 18px;
	}

	.pt-consulting-approach__title {

		font-size: 40px;

		line-height: 48px;
	}

	.pt-consulting-approach__subtitle {

		font-size: 17px;

		line-height: 28px;
	}

	/*
	   Tablet becomes 2 columns.
	*/

	.pt-consulting-approach__grid {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		grid-template-rows: auto;

		gap: 18px;
	}

	.pt-consulting-approach__card {

		height: auto;

		min-height: 300px;

		padding: 24px;

		gap: 18px;
	}

	.pt-consulting-approach__card--active {

		padding: 24px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 20px;

		line-height: 29px;
	}

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 24px;
	}
}


/* =========================================================
   TABLET PORTRAIT
   601px - 768px
========================================================= */

@media (max-width: 768px) and (min-width: 601px) {

	.pt-consulting-approach {

		padding: 55px 32px;
	}

	.pt-consulting-approach__container {

		max-width: 700px;

		gap: 30px;
	}

	.pt-consulting-approach__header {

		gap: 16px;
	}

	.pt-consulting-approach__title {

		font-size: 36px;

		line-height: 44px;
	}

	.pt-consulting-approach__subtitle {

		font-size: 16px;

		line-height: 26px;
	}

	.pt-consulting-approach__grid {

		grid-template-columns:
			repeat(2, minmax(0, 1fr));

		gap: 14px;
	}

	.pt-consulting-approach__card {

		min-height: 290px;

		padding: 20px;

		gap: 16px;

		border-radius: 8px;
	}

	.pt-consulting-approach__card--active {

		padding: 20px;
	}

	.pt-consulting-approach__icon-box {

		width: 44px;

		height: 44px;

		min-width: 44px;

		min-height: 44px;

		flex-basis: 44px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 18px;

		line-height: 27px;
	}

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 22px;
	}
}


/* =========================================================
   MOBILE
   <= 600px
========================================================= */

@media (max-width: 600px) {

	.pt-consulting-approach {

		padding: 45px 0 50px;
	}

	.pt-consulting-approach__container {

		width: calc(100% - 32px);

		max-width: none;

		margin: 0 auto;

		gap: 28px;
	}


	/* ---------------------------------------------
	   HEADER
	--------------------------------------------- */

	.pt-consulting-approach__header {

		width: 100%;

		gap: 12px;
	}

	.pt-consulting-approach__title {

		font-size: 31px;

		line-height: 39px;

		letter-spacing: -0.4px;
	}

	.pt-consulting-approach__subtitle {

		width: 100%;

		font-size: 15px;

		line-height: 24px;
	}

	.pt-consulting-approach__desktop-break {

		display: none;
	}


	/* ---------------------------------------------
	   GRID
	--------------------------------------------- */

	.pt-consulting-approach__grid {

		width: 100%;

		display: grid;

		grid-template-columns: 1fr;

		grid-template-rows: auto;

		gap: 14px;
	}


	/* ---------------------------------------------
	   CARD
	--------------------------------------------- */

	.pt-consulting-approach__card {

		width: 100%;

		height: auto;

		min-height: 0;

		padding: 22px;

		gap: 16px;

		border-radius: 8px;
	}


	/* Active card should use normal mobile padding */

	.pt-consulting-approach__card--active {

		padding: 22px;
	}


	/* ---------------------------------------------
	   ICON
	--------------------------------------------- */

	.pt-consulting-approach__icon-box {

		width: 46px;

		height: 46px;

		min-width: 46px;

		min-height: 46px;

		flex: 0 0 46px;
	}

	.pt-consulting-approach__icon-box svg {

		width: 19px;

		height: 19px;
	}


	/* ---------------------------------------------
	   TITLE
	--------------------------------------------- */

	.pt-consulting-approach__card h3 {

		font-size: 19px;

		line-height: 28px;

		letter-spacing: -0.15px;
	}


	/* ---------------------------------------------
	   DESCRIPTION
	--------------------------------------------- */

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 23px;
	}
}


/* =========================================================
   SMALL MOBILE
   <= 480px
========================================================= */

@media (max-width: 480px) {

	.pt-consulting-approach {

		padding: 38px 0 44px;
	}

	.pt-consulting-approach__container {

		width: calc(100% - 28px);

		gap: 24px;
	}

	.pt-consulting-approach__header {

		gap: 10px;
	}

	.pt-consulting-approach__title {

		font-size: 27px;

		line-height: 35px;
	}

	.pt-consulting-approach__subtitle {

		font-size: 14px;

		line-height: 22px;
	}

	.pt-consulting-approach__grid {

		gap: 12px;
	}

	.pt-consulting-approach__card {

		padding: 18px;

		gap: 14px;
	}

	.pt-consulting-approach__card--active {

		padding: 18px;
	}

	.pt-consulting-approach__icon-box {

		width: 44px;

		height: 44px;

		min-width: 44px;

		min-height: 44px;

		flex-basis: 44px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 18px;

		line-height: 26px;
	}

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 22px;
	}
}


/* =========================================================
   VERY SMALL MOBILE
   <= 360px
========================================================= */

@media (max-width: 360px) {

	.pt-consulting-approach {

		padding: 32px 0 38px;
	}

	.pt-consulting-approach__container {

		width: calc(100% - 24px);
	}

	.pt-consulting-approach__title {

		font-size: 25px;

		line-height: 32px;
	}

	.pt-consulting-approach__subtitle {

		font-size: 13px;

		line-height: 21px;
	}

	.pt-consulting-approach__card {

		padding: 16px;

		gap: 13px;
	}

	.pt-consulting-approach__card--active {

		padding: 16px;
	}

	.pt-consulting-approach__icon-box {

		width: 42px;

		height: 42px;

		min-width: 42px;

		min-height: 42px;

		flex-basis: 42px;
	}

	.pt-consulting-approach__icon-box svg {

		width: 18px;

		height: 18px;
	}

	.pt-consulting-approach__card h3 {

		font-size: 17px;

		line-height: 25px;
	}

	.pt-consulting-approach__card p {

		font-size: 16px;

		line-height: 21px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.pt-consulting-approach__card {

		transition: none;
	}
}

/* =========================================================
   TECHNOLOGY DECISIONS SECTION
========================================================= */

.pt-tech-decisions {
    width: 100%;
    box-sizing: border-box;

    padding: 100px;

    background: linear-gradient(
        180deg,
        #FFF9EC 0%,
        #FFFFFF 100%
    );

    overflow: hidden;
}


/* =========================================================
   CONTAINER
========================================================= */

.pt-tech-decisions__container {
    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 56px;

    box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.pt-tech-decisions__header {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 24px;

    text-align: center;
}


/* =========================================================
   TITLE
========================================================= */

.pt-tech-decisions__title {
    width: 100%;
    max-width: 690px;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 50px;
    line-height: 65px;

    text-align: center;

    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 89.16%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;
}


/* =========================================================
   SUBTITLE
========================================================= */

.pt-tech-decisions__subtitle {
    width: 100%;
    max-width: 836px;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 34px;

    color: #070707;

    text-align: center;
}


/* =========================================================
   GRID
========================================================= */

.pt-tech-decisions__grid {
    width: 100%;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

    box-sizing: border-box;
}


/* =========================================================
   CARD
========================================================= */

.pt-tech-decisions .pt-tech-card {
    position: relative;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 32px 24px;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 16px;

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.pt-tech-card__content {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 20px;

    box-sizing: border-box;
}


/* =========================================================
   CARD HEADER
========================================================= */

.pt-tech-card__header {
    width: 100%;
    min-height: 48px;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 16px;
}


/* =========================================================
   ICON CONTAINER
========================================================= */

.pt-tech-card__icon {
    flex: 0 0 48px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(233, 131, 5, 0.0784);

    border-radius: 50%;

    box-sizing: border-box;
}


/* =========================================================
   SVG ICON
========================================================= */

.pt-tech-card__icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: #E98305;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CARD TITLE
========================================================= */

.pt-tech-card h3 {
    flex: 1;

    min-width: 0;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 20px;
    line-height: 30px;

    color: #000000;
}


/* =========================================================
   CARD DESCRIPTION
========================================================= */

.pt-tech-card p {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 18px;
    line-height: 150%;

    color: #4B5563;
}


/* =========================================================
   BOTTOM ORANGE ACCENT
========================================================= */

.pt-tech-card__accent {
    display: block;

    width: 100%;
    height: 4px;

    flex-shrink: 0;

    background: #E98305;
}


/* =========================================================
   OPTIONAL HOVER
========================================================= */

.pt-tech-card:hover {
    transform: translateY(-3px);

    border-color: #E98305;

    box-shadow:
        0 10px 25px rgba(7, 7, 7, 0.08);
}


/* =========================================================
   TABLET
   768px - 1199px
========================================================= */

@media (max-width: 1199px) {

    .pt-tech-decisions {
        padding: 80px 40px;
    }

    .pt-tech-decisions__container {
        max-width: 960px;

        gap: 48px;
    }

    .pt-tech-decisions__title {
        font-size: 44px;
        line-height: 56px;

        max-width: 650px;
    }

    .pt-tech-decisions__subtitle {
        font-size: 18px;
        line-height: 30px;

        max-width: 760px;
    }

    .pt-tech-decisions__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 16px;
    }

    .pt-tech-card {

        padding: 28px 22px;
    }

}


/* =========================================================
   SMALL TABLET
   600px - 767px
========================================================= */

@media (max-width: 767px) {

    .pt-tech-decisions {
        padding: 64px 24px;
    }

    .pt-tech-decisions__container {
        gap: 40px;
    }

    .pt-tech-decisions__title {
        max-width: 600px;

        font-size: 38px;
        line-height: 48px;
    }

    .pt-tech-decisions__subtitle {
        font-size: 17px;
        line-height: 28px;
    }

    .pt-tech-decisions__grid {
        grid-template-columns: 1fr;

        gap: 16px;
    }

    .pt-tech-card {

        padding: 28px 24px;
    }


}


/* =========================================================
   MOBILE
   480px - 599px
========================================================= */

@media (max-width: 599px) {

    .pt-tech-decisions {
        padding: 55px 18px;
    }

    .pt-tech-decisions__container {
        gap: 34px;
    }

    .pt-tech-decisions__title {
        max-width: 100%;

        font-size: 32px;
        line-height: 42px;
    }

    .pt-tech-decisions__subtitle {
        max-width: 100%;

        font-size: 16px;
        line-height: 26px;
    }

    .pt-tech-decisions__grid {
        gap: 14px;
    }

    .pt-tech-card {

        padding: 24px 20px;

        border-radius: 14px;

        gap: 18px;
    }

    .pt-tech-card__content {
        gap: 18px;
    }

    .pt-tech-card__header {
        gap: 14px;
    }

    .pt-tech-card__icon {
        flex-basis: 44px;

        width: 44px;
        height: 44px;
    }

    .pt-tech-card__icon svg {
        width: 22px;
        height: 22px;
    }

    .pt-tech-card h3 {
        font-size: 18px;
        line-height: 27px;
    }

    .pt-tech-card p {
        font-size: 16px;
        line-height: 150%;
    }

    .pt-tech-card__accent {
        height: 3px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   Below 400px
========================================================= */

@media (max-width: 399px) {

    .pt-tech-decisions {
        padding: 48px 15px;
    }

    .pt-tech-decisions__title {
        font-size: 28px;
        line-height: 37px;
    }

    .pt-tech-decisions__subtitle {
        font-size: 15px;
        line-height: 24px;
    }

    .pt-tech-card {

        padding: 22px 18px;
    }

    .pt-tech-card__icon {
        flex-basis: 42px;

        width: 42px;
        height: 42px;
    }

    .pt-tech-card h3 {
        font-size: 17px;
        line-height: 25px;
    }

    .pt-tech-card p {
        font-size: 16px;
        line-height: 150%;
    }

}


/* =========================================================
   REMOVE DESKTOP LINE BREAK ON MOBILE
========================================================= */

@media (max-width: 767px) {

    .pt-tech-decisions__desktop-break {
        display: none;
    }

}

/* =========================================================
   FROM STRATEGY TO PRODUCTION
   ========================================================= */

.pt-strategy-production {
    width: 100%;
    box-sizing: border-box;

    padding: 0px 100px 100px 100px;

    display: flex;
    justify-content: center;
    align-items: center;

    background: #ffffff;
}


/* =========================================================
   MAIN BLUE CONTAINER
   ========================================================= */

.pt-strategy-production__container {
    width: 100%;
    max-width: 1240px;
    min-height: 519.39px;

    box-sizing: border-box;

    padding: 100px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 23px;

    background: linear-gradient(
        89.99deg,
        #057FFF 0.02%,
        #143A62 99.99%
    );

    border-radius: 24px;

    overflow: hidden;
}


/* =========================================================
   HEADING
   ========================================================= */

.pt-strategy-production__title {
    width: 100%;
    max-width: 934px;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 50px;
    line-height: 58px;

    text-align: center;

    color: #FFFFFF;
}


/* =========================================================
   CONTENT
   ========================================================= */

.pt-strategy-production__content {
    width: 100%;
    max-width: 1040px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    opacity: 0.8;

    text-align: center;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.pt-strategy-production__intro {
    width: 100%;
    max-width: 988px;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 31px;

    text-align: center;

    color: #FFFFFF;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.pt-strategy-production__description {
    width: 100%;
    max-width: 988px;

    margin: 0;
    padding: 0;

    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 31px;

    text-align: center;

    color: #FFFFFF;
}


/* =========================================================
   BUTTON WRAPPER
   ========================================================= */

.pt-strategy-production__button-wrap {
    width: 100%;
    max-width: 1040px;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    padding-top: 25px;

    box-sizing: border-box;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.pt-strategy-production__button {
    position: relative;

    width: 453px;
    min-height: 69px;

    box-sizing: border-box;

    padding: 20px 48px;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;

    gap: 10px;

    background: #F7F9FB;

    border-radius: 4px;

    text-decoration: none;

    box-shadow:
        0px 20px 25px rgba(0, 0, 0, 0.1),
        0px 8px 10px rgba(0, 0, 0, 0.1);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   BUTTON TEXT
   ========================================================= */

.pt-strategy-production__button span {
    font-family: 'Poppins', sans-serif;
    font-style: normal;
    font-weight: 600;

    font-size: 20px;
    line-height: 29px;

    white-space: nowrap;

    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 100%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}


/* =========================================================
   BUTTON ARROW
   ========================================================= */

.pt-strategy-production__arrow {
    flex: 0 0 16px;

    width: 16px;
    height: 16px;

    color: #E98305;

    transition: transform 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.pt-strategy-production__button:hover {
    transform: translateY(-2px);

    box-shadow:
        0px 24px 30px rgba(0, 0, 0, 0.14),
        0px 10px 14px rgba(0, 0, 0, 0.12);
}

.pt-strategy-production__button:hover
.pt-strategy-production__arrow {
    transform: translateX(3px);
}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (max-width: 1399px) {

    .pt-strategy-production {
        padding: 80px 60px;
    }

    .pt-strategy-production__container {
        max-width: 1240px;
    }
}


/* =========================================================
   TABLET
   768px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .pt-strategy-production {
        padding: 70px 40px;
    }

    .pt-strategy-production__container {
        min-height: auto;

        padding: 80px 60px;

        border-radius: 22px;

        gap: 22px;
    }

    .pt-strategy-production__title {
        max-width: 850px;

        font-size: 44px;
        line-height: 54px;
    }

    .pt-strategy-production__intro,
    .pt-strategy-production__description {
        max-width: 850px;

        font-size: 18px;
        line-height: 29px;
    }

    .pt-strategy-production__button-wrap {
        padding-top: 22px;
    }
}


/* =========================================================
   SMALL TABLET
   600px - 767px
   ========================================================= */

@media (max-width: 767px) {

    .pt-strategy-production {
        padding: 55px 24px;
    }

    .pt-strategy-production__container {
        padding: 60px 35px;

        border-radius: 20px;

        gap: 20px;
    }

    .pt-strategy-production__title {
        max-width: 600px;

        font-size: 36px;
        line-height: 46px;
    }

    .pt-strategy-production__content {
        gap: 10px;
    }

    .pt-strategy-production__intro,
    .pt-strategy-production__description {
        max-width: 600px;

        font-size: 16px;
        line-height: 26px;
    }

    .pt-strategy-production__button-wrap {
        padding-top: 18px;
    }

    .pt-strategy-production__button {
        width: 100%;
        max-width: 453px;

        min-height: 62px;

        padding: 17px 28px;
    }

    .pt-strategy-production__button span {
        font-size: 17px;
        line-height: 25px;
    }
}


/* =========================================================
   MOBILE
   480px - 599px
   ========================================================= */

@media (max-width: 599px) {

    .pt-strategy-production {
        padding: 45px 18px;
    }

    .pt-strategy-production__container {
        padding: 48px 22px;

        border-radius: 18px;

        gap: 18px;
    }

    .pt-strategy-production__title {
        font-size: 30px;
        line-height: 40px;
    }

    .pt-strategy-production__intro,
    .pt-strategy-production__description {
        font-size: 15px;
        line-height: 24px;
    }

    .pt-strategy-production__button-wrap {
        padding-top: 15px;
    }

    .pt-strategy-production__button {
        min-height: 58px;

        padding: 15px 20px;

        gap: 8px;
    }

    .pt-strategy-production__button span {
        font-size: 15px;
        line-height: 22px;
    }

    .pt-strategy-production__arrow {
        width: 15px;
        height: 15px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 400px
   ========================================================= */

@media (max-width: 399px) {

    .pt-strategy-production {
        padding: 35px 12px;
    }

    .pt-strategy-production__container {
        padding: 40px 18px;

        border-radius: 16px;

        gap: 16px;
    }

    .pt-strategy-production__title {
        font-size: 27px;
        line-height: 36px;
    }

    .pt-strategy-production__intro,
    .pt-strategy-production__description {
        font-size: 14px;
        line-height: 22px;
    }

    .pt-strategy-production__button-wrap {
        padding-top: 12px;
    }

    .pt-strategy-production__button {
        min-height: 54px;

        padding: 14px 14px;

        gap: 6px;
    }

    .pt-strategy-production__button span {
        font-size: 14px;
        line-height: 21px;

        white-space: normal;
        text-align: center;
    }

    .pt-strategy-production__arrow {
        flex: 0 0 14px;

        width: 14px;
        height: 14px;
    }
}

/*=========================================================
    PRIMOTECH HOMEPAGE CASE STUDY
    PART 2
    Header + Main Toyota Card
=========================================================*/

/*==============================
RESET
==============================*/

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.custm-homepage-casestudy-section{
    position:relative;
    width:100%;
    padding:0px 20px 100px 20px;
    background:#ffffff;
    overflow:hidden;
    font-family:'Poppins',sans-serif;
}

.custm-homepage-casestudy-container{
    width:100%;
    max-width:1303px;
    margin:0 auto;
}

/*==================================================
HEADING
==================================================*/

.custm-homepage-casestudy-heading{
    max-width:690px;
    margin:0 auto 55px;
    text-align:center;
}

.custm-homepage-casestudy-title{
    font-size:50px;
    font-weight:700;
    line-height:52px;
    letter-spacing:-0.5px;
    margin-bottom:22px;

    background:linear-gradient(
        90deg,
        #070707 0%,
        #e98305 90%
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.custm-homepage-casestudy-title span{
    color:inherit;
}

.custm-homepage-casestudy-description{
    max-width:688px;
    margin:auto;

    font-size:20px;
    font-weight:400;
    line-height:34px;
    color:#070707;
}

/*==================================================
WRAPPER
==================================================*/

.custm-homepage-casestudy-wrapper{
    display:flex;
    flex-direction:column;
    gap:24px;
}

.custm-homepage-casestudy-top-row{
    display:grid;
    grid-template-columns:2.2fr 1fr;
    gap:24px;
    align-items:stretch;
}

/*==================================================
FEATURE CARD
==================================================*/

.custm-homepage-casestudy-feature-card{

    position:relative;

    display:flex;
    justify-content:space-between;
    align-items:center;

    overflow:hidden;

    min-height:408px;

    border-radius:12px;

    padding:28px 0 28px 28px;

    background:linear-gradient(
        95deg,
        #ffdfdf 31%,
        #fff9f9 98%
    );

	background-image: url("https://assets.primotech.com/wp-content/uploads/2026/07/Frame-1321315956.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

}

/*========================================
WAVE BACKGROUND
========================================*/

.custm-homepage-casestudy-feature-bg{

    position:absolute;
    inset:0;

    background-image:
        radial-gradient(circle at left,
        rgba(255,255,255,.65) 1px,
        transparent 1px);

    background-size:14px 14px;

    opacity:.45;

    mix-blend-mode:screen;

    pointer-events:none;

}

/*==================================================
CONTENT
==================================================*/

.custm-homepage-casestudy-feature-content{

    position:relative;
    z-index:5;

    width:100%;
    max-width:500px;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

}

.custm-homepage-casestudy-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:36px;

    padding:6px 18px;

    margin-bottom:24px;

    border-radius:100px;

    background:rgba(255,255,255,.65);

    backdrop-filter:blur(12px);

    font-size:16px;
    font-weight:500;
    color:#070707;

}

.custm-homepage-casestudy-feature-title{

    font-size:24px;
    line-height:30px;
    font-weight:700;

    color:#070707;

    margin-bottom:22px;

    text-transform:uppercase;

}

.custm-homepage-casestudy-feature-text{
	
    font-size:14px;
    line-height:22px;
    color:#333;

    margin-bottom:22px;
	
}

.custm-homepage-casestudy-card-text{
	width: 50%;
    font-size:14px;
    line-height:22px;
    color:#333;

    margin-top:20px;
	margin-bottom: 0;
}

/*==================================================
TECHNOLOGY
==================================================*/

.custm-homepage-casestudy-tech{

    margin-bottom:28px;

}

.custm-homepage-casestudy-tech h5{

    font-size:16px;
    font-weight:700;

    margin-bottom:4px;

    color:#070707;

}

.custm-homepage-casestudy-tech p{

    font-size:14px;
    line-height:22px;

    font-weight:500;

    color:#222;

}

/*==================================================
BUTTON
==================================================*/

.custm-homepage-casestudy-btn{

    display:inline-flex;
    justify-content:center;
    align-items:center;

    width:223px;
    height:62px;

    background:#ff0100;

    border-radius:6px;

    color:#fff;
    text-decoration:none;

    font-size:19px;
    font-weight:700;

    transition:.35s ease;

}

.custm-homepage-casestudy-btn:hover{

    background:#d70000;

    transform:translateY(-2px);

    box-shadow:0 12px 30px rgba(255,0,0,.28);
	color: #fff;
}

/*==================================================
IMAGE AREA
==================================================*/

.custm-homepage-casestudy-feature-image{

    position:relative;

    flex:0 0 340px;

    height:100%;

    display:flex;
    align-items:flex-end;
    justify-content:center;

    z-index:3;

    padding-right:20px;

}

/*==================================================
TOYOTA LOGO
==================================================*/

.custm-homepage-casestudy-toyota-logo{

    position:absolute;

    top:0;
    right:30px;

    width:190px;
    height:auto;

    object-fit:contain;

}

/*==================================================
MAIN CLOUD IMAGE
==================================================*/

.custm-homepage-casestudy-main-image{

    position:relative;

    width:100%;
    max-width:320px;

    height:auto;

    object-fit:contain;

    transition:.45s ease;

    transform-origin:center bottom;

}

.custm-homepage-casestudy-feature-card:hover
.custm-homepage-casestudy-main-image{

    transform:translateY(-8px) scale(1.03);

}

/*==================================================
HOVER
==================================================*/

.custm-homepage-casestudy-feature-card{

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}

.custm-homepage-casestudy-feature-card:hover{

    transform:translateY(-6px);

    box-shadow:
    0 24px 60px rgba(0,0,0,.08);

}

/*==================================================
FOCUS STATES
==================================================*/

.custm-homepage-casestudy-btn:focus{

    outline:none;

    box-shadow:
    0 0 0 4px rgba(255,1,0,.2);

}

/*==================================================
IMAGE SAFETY
==================================================*/

.custm-homepage-casestudy-feature-image img{

    display:block;
    max-width:100%;

}

/*=========================================================
    PRIMOTECH HOMEPAGE CASE STUDY
    PART 3
    Right Card + Bottom Cards
=========================================================*/

/*==================================================
RIGHT SHOP CARD
==================================================*/

.custm-homepage-casestudy-shop-card{

    position:relative;

    overflow:hidden;

    min-height:408px;

    border-radius:12px;

    background:linear-gradient(
        108deg,
        #faf2f1 14%,
        #f6efee 96%
    );

    padding:28px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
	background-image: url("https://assets.primotech.com/wp-content/uploads/2026/07/Frame-1321315954.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.custm-homepage-casestudy-shop-card:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 55px rgba(0,0,0,.08);

}

/*--------------------------------*/

.custm-homepage-casestudy-card-bg{

    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at left,
    rgba(255,255,255,.55) 1px,
    transparent 1px);

    background-size:13px 13px;

    opacity:.35;

    pointer-events:none;

}

/*--------------------------------*/

.custm-homepage-casestudy-card-content{

    position:relative;
    z-index:2;
	max-width: 100%;
}

/*--------------------------------*/

.custm-homepage-casestudy-small-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:6px 14px;

    min-height:34px;

    border-radius:999px;

    background:rgba(255,255,255,.75);

    backdrop-filter:blur(10px);

    font-size:14px;
    font-weight:500;

    color:#070707;

    margin-bottom:22px;

}

/*--------------------------------*/

.custm-homepage-casestudy-card-title{

    font-size:22px;
	line-height: 22px;
    font-weight:700;

    line-height:30px;

    color:#070707;

    max-width:100%;

}

/*--------------------------------*/

.custm-homepage-casestudy-card-image {
    position: absolute;
    left: 140px;
    right: 0;
    bottom: 50px;
    z-index: 1;
	width: 300px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.custm-homepage-casestudy-card-image img {
    display: block;
    width: 100%;
    max-width: 308px;
    height: auto;
    object-fit: contain;
}

/* Large Desktop */
@media (min-width: 1600px) {
    .custm-homepage-casestudy-card-image {
        left: 170px;
        bottom: 50px;
    }

    .custm-homepage-casestudy-card-image img {
        max-width: 340px;
    }
}


/*==================================================
COMMON LINK
==================================================*/

.custm-homepage-casestudy-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:26px;

    text-decoration:none;

    font-size:13px;

    font-weight:600;

    transition:.3s;

}

.custm-homepage-casestudy-link svg{

    width:18px;
    height:18px;

    transition:.35s;

}

.custm-homepage-casestudy-link:hover svg{

    transform:translateX(5px);

}

/*==================================================
LINK COLORS
==================================================*/

.custm-homepage-casestudy-link.pink {
    color: #fe5975;
    width: 214;
    height: 54;
    angle: 0 deg;
    opacity: 1;
    border-radius: 5px;
    padding-top: 20px;
    padding-right: 30px;
    padding-bottom: 20px;
    padding-left: 30px;
    background: #FFFFFF;
}
.custm-homepage-casestudy-link:hover {
    background: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(255,0,0,.28);
    color: #fe5975;
}

.custm-homepage-casestudy-link.orange{
    color:#fe5200;
}

.custm-homepage-casestudy-link.blue{
    color:#3240d7;
}

.custm-homepage-casestudy-link.cyan{
    color:#057fff;
}

.custm-homepage-casestudy-link.orange:hover{
    color:#fe5200;
	background-color: transparent;
	box-shadow: none;
}

.custm-homepage-casestudy-link.blue:hover{
    color:#3240d7;
	background-color: transparent;
	box-shadow: none;
}

.custm-homepage-casestudy-link.cyan:hover{
    color:#057fff;
	background-color: transparent;
	box-shadow: none;
}

/*==================================================
BOTTOM ROW
==================================================*/

.custm-homepage-casestudy-bottom-row{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:24px;

}

/*==================================================
COMMON SMALL CARD
==================================================*/

.custm-homepage-casestudy-small-card{

    position:relative;

    overflow:hidden;

    min-height:197px;

    border-radius:12px;

    padding:28px;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    transition:
        transform .35s,
        box-shadow .35s;

}

.custm-homepage-casestudy-small-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 45px rgba(0,0,0,.08);

}

/*==================================================
BACKGROUND COLORS
==================================================*/

.custm-homepage-casestudy-food{

    background:linear-gradient(
        108deg,
        #faf2f1 15%,
        #ffddcd 100%
    );

}

.custm-homepage-casestudy-event{

    background:linear-gradient(
        108deg,
        #e2e3ff 14%,
        #a9adf0 100%
    );

}

.custm-homepage-casestudy-medical{

    background:linear-gradient(
        108deg,
        #faf2f1 15%,
        #f6efee 100%
    );

}

/*==================================================
TEXT
==================================================*/

.custm-homepage-casestudy-small-content{

    position:relative;

    z-index:3;

    max-width:210px;

}

.custm-homepage-casestudy-small-content h3{

    font-size:16px;

    line-height:22px;

    font-weight:700;

    color:#070707;

}

/*==================================================
IMAGE HOLDER
==================================================*/

.custm-homepage-casestudy-small-image{

    position:absolute;

    right:10px;
    bottom:0;

    width:165px;

    z-index:2;

}

.custm-homepage-casestudy-small-image img{

    display:block;

    width:100%;

    height:auto;

}

/*==================================================
EVENT IMAGE
==================================================*/

.custm-homepage-casestudy-event
.custm-homepage-casestudy-small-image{

    width:160px;

    right:6px;

}

/*==================================================
FOOD IMAGE
==================================================*/

.custm-homepage-casestudy-food
.custm-homepage-casestudy-small-image{

    width:165px;

}

/*==================================================
MEDICAL IMAGE
==================================================*/

.custm-homepage-casestudy-medical-image{

    position:absolute;

    top:0;
    right:0;

    width:288px;
    height:100%;

    overflow:hidden;

    border-radius:
        0
        12px
        12px
        0;

}

.custm-homepage-casestudy-medical-image img{

    width:100%;
    height:100%;

    object-fit:cover;

}

/*==================================================
MEDICAL FADE
==================================================*/

.custm-homepage-casestudy-medical-overlay{

    position:absolute;

    top:0;
    left:120px;

    width:180px;
    height:100%;

    background:linear-gradient(
        90deg,
        #faf3f2 5%,
        rgba(250,243,242,0) 100%
    );

    z-index:2;

}

/*==================================================
IMAGE ANIMATION
==================================================*/

.custm-homepage-casestudy-small-image img,
.custm-homepage-casestudy-card-image img,
.custm-homepage-casestudy-medical-image img{

    transition:
        transform .45s ease;

}

.custm-homepage-casestudy-small-card:hover img,
.custm-homepage-casestudy-shop-card:hover img{

    transform:scale(1.04);

}

/*==================================================
ACCESSIBILITY
==================================================*/

.custm-homepage-casestudy-link:focus{

    outline:none;

    text-decoration:underline;

}

/*=========================================================
    PRIMOTECH HOMEPAGE CASE STUDY
    PART 4
    COMPLETE RESPONSIVE CSS
=========================================================*/

/*==================================================
≤ 1400px
==================================================*/

@media (max-width:1400px){

    .custm-homepage-casestudy-container{
        max-width:1200px;
    }

    .custm-homepage-casestudy-top-row{
        grid-template-columns:2fr 1fr;
    }

    .custm-homepage-casestudy-feature-card{
        min-height:390px;
    }

    .custm-homepage-casestudy-feature-image{
        flex:0 0 300px;
    }

    .custm-homepage-casestudy-main-image{
        max-width:290px;
    }

}

/*==================================================
≤ 1200px
==================================================*/

@media (max-width:1200px){

    .custm-homepage-casestudy-section{
        padding:80px 24px;
    }

    .custm-homepage-casestudy-title{
        font-size:44px;
        line-height:48px;
    }

    .custm-homepage-casestudy-description{
        font-size:18px;
        line-height:32px;
    }

    .custm-homepage-casestudy-top-row{
        grid-template-columns:1fr;
    }

    .custm-homepage-casestudy-shop-card{
        min-height:300px;
    }

    .custm-homepage-casestudy-bottom-row{
        grid-template-columns:repeat(2,1fr);
    }

}


@media (min-width: 768px) and (max-width: 1024px) {
    .flip-card-back,
    .flip-card-front {
        min-height: 260px;
    }

    .flip-card-back {
        padding: 22px 35px;
    }

    .flip-card-front img {
        object-fit: contain;
    }
}


/*==================================================
≤ 1024px
==================================================*/

@media (max-width:1024px){
	img.custm-homepage-casestudy-main-image {
		width: 50%;
	}

    .custm-homepage-casestudy-feature-card{

        flex-direction:column;

        align-items:flex-start;

        padding:35px;

        gap:35px;

    }

    .custm-homepage-casestudy-feature-content{

        max-width:100%;

    }

    .custm-homepage-casestudy-feature-image{

        width:100%;

        justify-content:center;

        padding-right:0;

    }

    .custm-homepage-casestudy-main-image{

        max-width:320px;

    }

    .custm-homepage-casestudy-toyota-logo{

        right:0px;

        width:170px;

    }

}

/*==================================================
≤ 991px
==================================================*/

@media (max-width:991px){
	img.custm-homepage-casestudy-main-image {
		width: 50%;
	}

	.custm-homepage-casestudy-card-content{
		max-width: 70%;
	}

    .custm-homepage-casestudy-title{

        font-size:40px;

        line-height:46px;

    }

    .custm-homepage-casestudy-description{

        font-size:17px;

        line-height:30px;

    }

    .custm-homepage-casestudy-bottom-row{

        grid-template-columns:1fr;

    }

    .custm-homepage-casestudy-small-card{

        min-height:230px;

    }

    .custm-homepage-casestudy-medical-image{

        width:250px;

    }

}

/*==================================================
≤ 768px
==================================================*/

@media (max-width:1200px){

	.custm-homepage-casestudy-card-title{
		width: 50%;
	}
}
@media (max-width:1024px){

	.custm-homepage-casestudy-card-title{
		width: 58%;
	}
}
@media (max-width:900px){

	.custm-homepage-casestudy-card-title{
		width: 82%;
	}
}
@media (max-width:480px){

	.custm-homepage-casestudy-card-title{
		width: 90%;
	}
}
@media (max-width:768px){

	img.custm-homepage-casestudy-main-image {
		width: 55%;
	}

    .custm-homepage-casestudy-section{

        padding:70px 18px;

    }

    .custm-homepage-casestudy-heading{

        margin-bottom:40px;

    }

    .custm-homepage-casestudy-title{

        font-size:34px;

        line-height:40px;

    }

    .custm-homepage-casestudy-description{

        font-size:16px;

        line-height:28px;

    }

    .custm-homepage-casestudy-feature-card{

        padding:28px;

        min-height:auto;

    }

    .custm-homepage-casestudy-feature-title{

        font-size:22px;

        line-height:30px;

    }

    .custm-homepage-casestudy-btn{

        width:100%;

        max-width:260px;

        height:56px;

        font-size:17px;

    }

    .custm-homepage-casestudy-shop-card{

        min-height:0;

    }

    .custm-homepage-casestudy-card-image{

        width:170px;

    }

}

/*==================================================
≤ 575px
==================================================*/

@media (max-width:575px){
	img.custm-homepage-casestudy-main-image {
		width: 80%;
	}

    .custm-homepage-casestudy-title{

        font-size:30px;

        line-height:36px;

    }

    .custm-homepage-casestudy-description{

        font-size:15px;

        line-height:26px;

    }

    .custm-homepage-casestudy-feature-card{

        padding:24px;

    }

    .custm-homepage-casestudy-feature-title{

        font-size:20px;

        line-height:28px;

    }

    .custm-homepage-casestudy-feature-text{

        font-size:15px;

    }

    .custm-homepage-casestudy-main-image{

        max-width:260px;

    }

    .custm-homepage-casestudy-toyota-logo{

        width:140px;

    }

    .custm-homepage-casestudy-shop-card{

        padding:22px;

        min-height:0;

    }

    .custm-homepage-casestudy-card-title{

        font-size:20px;

        line-height:28px;

        max-width:100%;

    }

    .custm-homepage-casestudy-card-image{

        width:150px;

    }

    .custm-homepage-casestudy-small-card{

        min-height:220px;

        padding:22px;

    }

    .custm-homepage-casestudy-small-content{

        max-width:190px;

    }

    .custm-homepage-casestudy-small-content h3{

        font-size:15px;

        line-height:22px;

    }

    .custm-homepage-casestudy-small-image{

        width:130px;

    }

    .custm-homepage-casestudy-medical-image{

        width:180px;

    }

}

/*==================================================
≤ 480px
==================================================*/

@media (max-width:480px){
	img.custm-homepage-casestudy-main-image {
		width: 90%;
	}

    .custm-homepage-casestudy-section{

        padding:60px 16px;

    }

    .custm-homepage-casestudy-title{

        font-size:28px;

        line-height:34px;

    }

    .custm-homepage-casestudy-description{

        font-size:14px;

        line-height:24px;

    }

    .custm-homepage-casestudy-badge,
    .custm-homepage-casestudy-small-badge{

        font-size:12px;

        min-height:30px;

        padding:6px 12px;

    }

    .custm-homepage-casestudy-feature-title{

        font-size:18px;

        line-height:26px;

    }

    .custm-homepage-casestudy-btn{

        width:100%;

        max-width:100%;

        font-size:16px;

        height:54px;

    }

    .custm-homepage-casestudy-main-image{

        max-width:220px;

    }

    .custm-homepage-casestudy-card-image {
		position: relative;
		width: 140px;
		margin: 20px auto 0;
		display: flex;
		justify-content: center;
		align-items: center;
		right: auto;
	}

	.custm-homepage-casestudy-card-image img {
		display: block;
		max-width: 100%;
		height: auto;
	}
	.custm-homepage-casestudy-card-content {
		max-width: 100%;
	}

    .custm-homepage-casestudy-small-image{

        width:120px;

    }

    .custm-homepage-casestudy-medical-image{

        opacity:.35;

        width:100%;

    }

    .custm-homepage-casestudy-medical-overlay{

        display:none;

    }

}

/*==================================================
≤ 375px
==================================================*/

@media (max-width:375px){

    .custm-homepage-casestudy-title{

        font-size:26px;

    }

    .custm-homepage-casestudy-description{

        font-size:13px;

    }

    .custm-homepage-casestudy-feature-title{

        font-size:17px;

        line-height:24px;

    }

    .custm-homepage-casestudy-card-title{

        font-size:18px;

        line-height:100%;

    }

    .custm-homepage-casestudy-small-content{

        max-width:160px;

    }

    .custm-homepage-casestudy-small-image{

        width:105px;

    }

}

/*==================================================
≤ 320px
==================================================*/

@media (max-width:320px){

    .custm-homepage-casestudy-section{

        padding:50px 14px;

    }

    .custm-homepage-casestudy-title{

        font-size:24px;

        line-height:30px;

    }

    .custm-homepage-casestudy-description{

        font-size:12px;

        line-height:22px;

    }

    .custm-homepage-casestudy-feature-card,
    .custm-homepage-casestudy-shop-card,
    .custm-homepage-casestudy-small-card{

        padding:18px;

    }

    .custm-homepage-casestudy-feature-title{

        font-size:16px;

        line-height:22px;

    }

    .custm-homepage-casestudy-btn{

        height:50px;

        font-size:15px;

    }

    .custm-homepage-casestudy-main-image{

        max-width:180px;

    }

    .custm-homepage-casestudy-card-image{

        width:120px;

    }

    .custm-homepage-casestudy-small-image{

        width:90px;

    }

}

/*==================================================
IMAGE SAFETY
==================================================*/

.custm-homepage-casestudy-section img{

    display:block;

    max-width:100%;

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.custm-homepage-casestudy-feature-card,
.custm-homepage-casestudy-shop-card,
.custm-homepage-casestudy-small-card,
.custm-homepage-casestudy-btn,
.custm-homepage-casestudy-link,
.custm-homepage-casestudy-section img{

    transition:all .35s ease;

}

/* Desktop: show desktop logo, hide mobile logo */
.custm-homepage-casestudy-toyota-logo {
    display: block;
}

.custm-homepage-casestudy-toyota-logo.mobile-visible {
    display: none;
}

/* Tablet & Mobile (1024px and below): hide desktop logo, show mobile logo */
@media (max-width: 1024px) {
    .custm-homepage-casestudy-toyota-logo:not(.mobile-visible) {
        display: none;
    }

    .custm-homepage-casestudy-toyota-logo.mobile-visible {
        display: block;
    }
}

/* =========================================================
   AI STRATEGY COST SECTION
   ========================================================= */

.ai-strategy-cost-section {
    width: 100%;
    padding: 20px 100px 100px 100px;
    box-sizing: border-box;
    background: #ffffff;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.ai-strategy-cost-container {
    width: 100%;
    max-width: 1434px;
    margin: 0 auto;

    display: flex;
    flex-direction: row;
    align-items: flex-end;

    gap: 47px;

    box-sizing: border-box;
}


/* =========================================================
   IMAGE
   ========================================================= */

.ai-strategy-cost-image {
    width: 564px;

    flex: 0 0 564px;

    overflow: hidden;
    border-radius: 24px;
}

.ai-strategy-cost-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    border-radius: 24px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.ai-strategy-cost-content {
    width: 623px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;

    box-sizing: border-box;
}


/* =========================================================
   HEADING
   ========================================================= */

.ai-strategy-cost-title {
    width: 607px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 50px;
    line-height: 61px;

    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 59.7%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.ai-strategy-cost-description {
    width: 623px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 160%;

    color: #4B5563;
}


/* =========================================================
   CTA BUTTON
   ========================================================= */

.ai-strategy-cost-button {
    width: 348px;
    height: 62px;

    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px 30px;

    background: #E98305;
    border-radius: 5px;

    text-decoration: none;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 19px;
    line-height: 21px;

    text-align: center;
    text-transform: capitalize;

    color: #FFFFFF;

    transition:
        background 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


/* =========================================================
   BUTTON HOVER
   ========================================================= */

.ai-strategy-cost-button:hover {
    background: #d87500;

    transform: translateY(-2px);
    color: #fff;
    box-shadow: 0 8px 20px rgba(233, 131, 5, 0.25);
}


/* =========================================================
   LARGE DESKTOP
   1200px - 1439px
   ========================================================= */



@media (max-width: 1439px) {

    .ai-strategy-cost-section {
        padding: 80px 60px;
    }

    .ai-strategy-cost-container {
        max-width: 1240px;
        gap: 40px;
    }

    .ai-strategy-cost-image {
        width: 52%;
        aspect-ratio: 564 / 360;

        flex: 0 1 52%;
    }

    .ai-strategy-cost-content {
        width: 48%;
        flex: 1;
    }

    .ai-strategy-cost-title {
        width: 100%;
        font-size: 46px;
        line-height: 56px;
    }

    .ai-strategy-cost-description {
        width: 100%;
        font-size: 19px;
    }
}
@media (max-width: 1303px) {
    .ai-strategy-cost-image {
        aspect-ratio: 460 / 360;
    }
}


/* =========================================================
   TABLET / SMALL LAPTOP
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .ai-strategy-cost-section {
        padding: 70px 40px;
    }

    .ai-strategy-cost-container {
        gap: 35px;
    }

    .ai-strategy-cost-image {
        width: 50%;
        flex: 0 1 50%;
    }

    .ai-strategy-cost-content {
        width: 50%;
    }

    .ai-strategy-cost-title {
        font-size: 40px;
        line-height: 50px;
    }

    .ai-strategy-cost-description {
        font-size: 17px;
        line-height: 160%;
    }

    .ai-strategy-cost-button {
        width: 100%;
        max-width: 348px;
    }
}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .ai-strategy-cost-section {
        padding: 60px 30px;
    }

    .ai-strategy-cost-container {
        gap: 30px;
        align-items: center;
    }

    .ai-strategy-cost-image {
        width: 48%;
        flex: 0 1 48%;

        aspect-ratio: 564 / 421;
    }

    .ai-strategy-cost-content {
        width: 52%;
        gap: 20px;
    }

    .ai-strategy-cost-title {
        font-size: 34px;
        line-height: 43px;
    }

    .ai-strategy-cost-description {
        font-size: 16px;
        line-height: 26px;
    }

    .ai-strategy-cost-button {
        width: auto;
        min-width: 280px;

        height: 58px;

        padding: 17px 25px;

        font-size: 17px;
    }
}


/* =========================================================
   MOBILE
   BELOW 767px
   ========================================================= */

@media (max-width: 767px) {

    .ai-strategy-cost-section {
        padding: 50px 24px;
    }

    .ai-strategy-cost-container {
        width: 100%;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: 30px;
    }

    .ai-strategy-cost-image {
        width: 100%;
        height: auto;

        flex: none;

        aspect-ratio: 564 / 421;

        border-radius: 20px;
    }

    .ai-strategy-cost-image img {
        border-radius: 20px;
    }

    .ai-strategy-cost-content {
        width: 100%;

        gap: 20px;
    }

    .ai-strategy-cost-title {
        width: 100%;

        font-size: 34px;
        line-height: 44px;
    }

    .desktop-break {
        display: none;
    }

    .ai-strategy-cost-description {
        width: 100%;

        font-size: 16px;
        line-height: 26px;
    }

    .ai-strategy-cost-button {
        width: 100%;
        max-width: 348px;

        height: 58px;

        padding: 16px 20px;

        font-size: 17px;
        line-height: 21px;
    }
}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .ai-strategy-cost-section {
        padding: 40px 18px;
    }

    .ai-strategy-cost-container {
        gap: 25px;
    }

    .ai-strategy-cost-image {
        border-radius: 16px;
    }

    .ai-strategy-cost-image img {
        border-radius: 16px;
    }

    .ai-strategy-cost-content {
        gap: 18px;
    }

    .ai-strategy-cost-title {
        font-size: 30px;
        line-height: 39px;
    }

    .ai-strategy-cost-description {
        font-size: 16px;
        line-height: 24px;
    }

    .ai-strategy-cost-button {
        width: 100%;
        max-width: none;

        height: 56px;

        font-size: 16px;
        line-height: 20px;
    }
}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 375px
   ========================================================= */

@media (max-width: 375px) {

    .ai-strategy-cost-section {
        padding: 35px 15px;
    }

    .ai-strategy-cost-title {
        font-size: 27px;
        line-height: 36px;
    }

    .ai-strategy-cost-description {
        font-size: 16px;
        line-height: 23px;
    }

    .ai-strategy-cost-button {
        height: 54px;

        padding: 15px;

        font-size: 15px;
    }
}

/* =========================================================
   AI STRATEGY ENGAGEMENT PROCESS
   ========================================================= */

.ai-strategy-process {
    width: 100%;
    background: #FFF9EC;
    box-sizing: border-box;
    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
   Figma:
   Width: 1240px
   Padding: 100px
   Gap: 80px
   ========================================================= */

.ai-strategy-process__container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;

    padding: 100px 0;

    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: 80px;

    box-sizing: border-box;
}


/* =========================================================
   LEFT COLUMN
   Figma width: 400px
   ========================================================= */

.ai-strategy-process__left {
    width: 400px;
    min-width: 400px;

    flex: 0 0 400px;
}


/* =========================================================
   STICKY CONTENT
   ========================================================= */

.ai-strategy-process__sticky {
    position: sticky;
    top: 80px;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;
}


/* =========================================================
   MAIN TITLE
   Figma:
   400px
   50px
   62px
   700
   ========================================================= */

.ai-strategy-process__title {
    width: 400px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 50px;
    line-height: 62px;

    letter-spacing: 0;

    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 75.97%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;
}


/* =========================================================
   INTRO TEXT
   ========================================================= */

.ai-strategy-process__intro {
    width: 400px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 160%;

    color: #374151;
}


/* =========================================================
   RIGHT COLUMN
   Figma width: 760px
   ========================================================= */

.ai-strategy-process__right {
    width: 760px;
    flex: 1 1 760px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 48px;

    min-width: 0;
}


/* =========================================================
   STEP
   ========================================================= */

.ai-strategy-process__step {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 24px;
}


/* =========================================================
   STEP CONTENT
   ========================================================= */

.ai-strategy-process__step-content {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: flex-start;

    gap: 32px;
}


/* =========================================================
   NUMBER
   Figma:
   Width: 60px
   Font: 44px
   Italic
   ========================================================= */

.ai-strategy-process__number {
    width: 60px;
    min-width: 60px;

    font-family: "Poppins", sans-serif;
    font-style: italic;
    font-weight: 400;

    font-size: 44px;
    line-height: 66px;

    color: #E98305;
}


/* =========================================================
   DETAILS
   ========================================================= */

.ai-strategy-process__details {
    flex: 1;

    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 12px;
}


/* =========================================================
   STEP TITLE
   ========================================================= */

.ai-strategy-process__details h3 {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;

    font-size: 24px;
    line-height: 36px;

    letter-spacing: -0.5px;

    color: #111827;
}


/* =========================================================
   STEP DESCRIPTION
   ========================================================= */

.ai-strategy-process__details p {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 18px;
    line-height: 160%;

    color: #4B5563;
}


/* =========================================================
   DIVIDER
   ========================================================= */

.ai-strategy-process__line {
    width: 100%;
    height: 1px;

    background: #E5E7EB;

    box-sizing: border-box;
}


/* =========================================================
   LAST ITEM
   ========================================================= */

.ai-strategy-process__step--last {
    gap: 0;
}


/* =========================================================
   LARGE DESKTOP
   1200px - 1439px
   ========================================================= */

@media (max-width: 1439px) {

    .ai-strategy-process__container {
        padding-left: 60px;
        padding-right: 60px;

        gap: 60px;
    }

    .ai-strategy-process__left {
        width: 36%;
        min-width: 0;
        flex: 0 0 36%;
    }

    .ai-strategy-process__title {
        width: 100%;

        font-size: 46px;
        line-height: 57px;
    }

    .ai-strategy-process__intro {
        width: 100%;
        font-size: 19px;
    }

    .ai-strategy-process__right {
        width: auto;
        flex: 1;
    }

}


/* =========================================================
   LAPTOP / TABLET LANDSCAPE
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .ai-strategy-process__container {
        padding: 80px 40px;

        gap: 45px;
    }

    .ai-strategy-process__left {
        width: 35%;
        flex: 0 0 35%;
    }

    .ai-strategy-process__title {
        font-size: 40px;
        line-height: 50px;
    }

    .ai-strategy-process__intro {
        font-size: 17px;
        line-height: 160%;
    }

    .ai-strategy-process__right {
        gap: 40px;
    }

    .ai-strategy-process__step-content {
        gap: 24px;
    }

    .ai-strategy-process__number {
        width: 55px;
        min-width: 55px;

        font-size: 40px;
        line-height: 60px;
    }

    .ai-strategy-process__details h3 {
        font-size: 21px;
        line-height: 31px;
    }

    .ai-strategy-process__details p {
        font-size: 16px;
        line-height: 26px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .ai-strategy-process__container {
        padding: 70px 30px;

        gap: 35px;
    }

    .ai-strategy-process__left {
        width: 32%;
        flex: 0 0 32%;
    }

    .ai-strategy-process__sticky {
        top: 40px;
    }

    .ai-strategy-process__title {
        font-size: 34px;
        line-height: 43px;
    }

    .ai-strategy-process__intro {
        font-size: 16px;
        line-height: 25px;
    }

    .ai-strategy-process__right {
        gap: 32px;
    }

    .ai-strategy-process__step {
        gap: 18px;
    }

    .ai-strategy-process__step-content {
        gap: 20px;
    }

    .ai-strategy-process__number {
        width: 50px;
        min-width: 50px;

        font-size: 34px;
        line-height: 52px;
    }

    .ai-strategy-process__details {
        gap: 8px;
    }

    .ai-strategy-process__details h3 {
        font-size: 19px;
        line-height: 29px;
    }

    .ai-strategy-process__details p {
        font-size: 16px;
        line-height: 24px;
    }

}


/* =========================================================
   MOBILE
   BELOW 767px
   ========================================================= */

@media (max-width: 767px) {

    .ai-strategy-process__container {
        width: 100%;

        padding: 55px 24px;

        display: flex;
        flex-direction: column;

        gap: 45px;
    }


    /* LEFT */
    .ai-strategy-process__left {
        width: 100%;
        min-width: 0;
        flex: none;
    }

    .ai-strategy-process__sticky {
        position: static;

        width: 100%;

        gap: 18px;
    }

    .ai-strategy-process__title {
        width: 100%;

        font-size: 36px;
        line-height: 45px;
    }

    .ai-strategy-process__intro {
        width: 100%;

        font-size: 16px;
        line-height: 26px;
    }


    /* RIGHT */
    .ai-strategy-process__right {
        width: 100%;
        flex: none;

        gap: 30px;
    }


    /* STEP */
    .ai-strategy-process__step {
        width: 100%;

        gap: 18px;
    }


    /* STEP CONTENT */
    .ai-strategy-process__step-content {
        width: 100%;

        gap: 18px;
    }


    /* NUMBER */
    .ai-strategy-process__number {
        width: 45px;
        min-width: 45px;

        font-size: 32px;
        line-height: 48px;
    }


    /* DETAILS */
    .ai-strategy-process__details {
        gap: 7px;
    }

    .ai-strategy-process__details h3 {
        font-size: 19px;
        line-height: 28px;

        letter-spacing: -0.3px;
    }

    .ai-strategy-process__details p {
        font-size: 16px;
        line-height: 24px;
    }

}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .ai-strategy-process__container {
        padding: 45px 18px;

        gap: 40px;
    }

    .ai-strategy-process__title {
        font-size: 32px;
        line-height: 41px;
    }

    .ai-strategy-process__intro {
        font-size: 15px;
        line-height: 24px;
    }

    .ai-strategy-process__right {
        gap: 28px;
    }

    .ai-strategy-process__step {
        gap: 16px;
    }

    .ai-strategy-process__step-content {
        gap: 14px;
    }

    .ai-strategy-process__number {
        width: 40px;
        min-width: 40px;

        font-size: 28px;
        line-height: 43px;
    }

    .ai-strategy-process__details {
        gap: 6px;
    }

    .ai-strategy-process__details h3 {
        font-size: 17px;
        line-height: 25px;
    }

    .ai-strategy-process__details p {
        font-size: 16px;
        line-height: 22px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 375px
   ========================================================= */

@media (max-width: 375px) {

    .ai-strategy-process__container {
        padding: 40px 15px;
    }

    .ai-strategy-process__title {
        font-size: 29px;
        line-height: 37px;
    }

    .ai-strategy-process__intro {
        font-size: 14px;
        line-height: 22px;
    }

    .ai-strategy-process__step-content {
        gap: 12px;
    }

    .ai-strategy-process__number {
        width: 36px;
        min-width: 36px;

        font-size: 25px;
        line-height: 38px;
    }

    .ai-strategy-process__details h3 {
        font-size: 16px;
        line-height: 24px;
    }

    .ai-strategy-process__details p {
        font-size: 16px;
        line-height: 21px;
    }

}

/* =========================================================
   PRIMOTECH - GOVERNANCE SECTION
   ========================================================= */

.pt-governance-section {
    position: relative;
    width: 100%;

    box-sizing: border-box;

    background:
        linear-gradient(
            176.72deg,
            #FFF9EC 2.39%,
            #FFFFFF 94.67%
        );

    overflow: hidden;
}


/* =========================================================
   BACKGROUND GLOW
   Figma:
   width 344px
   height 345px
   opacity 0.08
   blur 60px
   ========================================================= */

.pt-governance-section__glow {
    position: absolute;

    width: 344px;
    height: 345px;

    right: 168px;
    top: 150px;

    background: #F08705;

    opacity: 0.08;

    filter: blur(60px);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.pt-governance-section__container {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 1240px;

    margin: 0 auto;

    padding: 0px 0 100px 0;

    box-sizing: border-box;
}


/* =========================================================
   TOP LAYOUT
   Figma:
   width: 1280px
   gap: 52px
   height: 332px
   ========================================================= */

.pt-governance-section__top {
    width: 100%;

    display: flex;
    flex-direction: row;
    align-items: center;

    gap: 52px;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.pt-governance-section__content {
    width: calc(100% - 570px);

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 32px;

    min-width: 0;
}


/* =========================================================
   HEADER
   ========================================================= */

.pt-governance-section__header {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 16px;
}


/* =========================================================
   TITLE
   Figma:
   50px / 62px
   Poppins 700
   ========================================================= */

.pt-governance-section__title {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 700;

    font-size: 50px;
    line-height: 62px;

    letter-spacing: 0;

    color: #070707;
}


/*
   Gradient portion
*/

.pt-governance-section__title span {
    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 75.97%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
    color: transparent;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.pt-governance-section__subtitle {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 20px;
    line-height: 160%;

    color: #374151;
}


/* =========================================================
   CALLOUT
   Figma:
   width 689px
   height 94px
   padding 20px
   gap 16px
   border-radius 16px
   ========================================================= */

.pt-governance-section__callout {
    width: 100%;
    min-height: 94px;

    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 20px;

    gap: 16px;

    background: #FFFFFF;

    border: 1px solid #FFE6C7;

    box-shadow:
        0 8px 24px rgba(5, 127, 255, 0.0313726);

    border-radius: 16px;
}


/* =========================================================
   CALLOUT ICON
   ========================================================= */

.pt-governance-section__callout-icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #FFF9EC;

    border-radius: 12px;
}


/* =========================================================
   CALLOUT TEXT
   ========================================================= */

.pt-governance-section__callout p {
    flex: 1;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 400;

    font-size: 18px;
    line-height: 150%;

    color: #4B5563;
}


.pt-governance-section__callout strong {
    color: #E98305;
    font-weight: 700;
}


/* =========================================================
   RIGHT VISUAL
   Figma:
   518px × 332px
   ========================================================= */

.pt-governance-section__visual {
    width: 518px;
    height: 332px;

    min-width: 518px;

    display: flex;
    align-items: center;
    justify-content: center;
}


.pt-governance-section__visual-image {
    display: block;

    width: 518px;
    height: 332px;

    max-width: 100%;

    object-fit: contain;
}


/* =========================================================
   FRAMEWORK CARDS CONTAINER
   Figma:
   width 1240px
   height 170px
   gap 20px
   ========================================================= */

.pt-governance-section__frameworks {
    width: 100%;

    margin-top: 92px;

    display: grid;

    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   FRAMEWORK CARD
   Figma:
   190px × 170px
   padding 24px 16px 20px
   gap 16px
   ========================================================= */

.pt-governance-section__card {
    width: 100%;
    height: 170px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    padding: 24px 16px 20px;

    gap: 16px;

    background: #FFFFFF;

    border: 1px solid #FFF9EC;

    box-shadow:
        0 8px 16px rgba(240, 135, 5, 0.05);

    border-radius: 12px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.pt-governance-section__card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 12px 24px rgba(240, 135, 5, 0.10);
}


/* =========================================================
   LOGO
   ========================================================= */

.pt-governance-section__logo {
    width: 86px;
    height: 74px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;
}


.pt-governance-section__logo img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


/* SOC2 is slightly taller in Figma */
.pt-governance-section__logo--soc2 {
    width: 62px;
    height: 89px;
}


/* =========================================================
   CARD LABEL
   Figma:
   18px / 20px
   Poppins 600
   ========================================================= */

.pt-governance-section__card span {
    width: 100%;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;
    font-style: normal;
    font-weight: 600;

    font-size: 18px;
    line-height: 20px;

    text-align: center;

    color: #0B1527;
}


/* =========================================================
   LARGE DESKTOP
   1200px - 1439px
   ========================================================= */

@media (max-width: 1439px) {

    .pt-governance-section__container {
        max-width: 1240px;

        padding-left: 50px;
        padding-right: 50px;
    }

    .pt-governance-section__content {
        width: calc(100% - 500px);
    }

    .pt-governance-section__visual {
        width: 500px;
        min-width: 500px;
        height: auto;
    }

    .pt-governance-section__visual-image {
        width: 100%;
        height: auto;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .pt-governance-section {
        min-height: auto;
    }

    .pt-governance-section__container {
        padding: 80px 40px;
    }

    .pt-governance-section__top {
        gap: 40px;
    }

    .pt-governance-section__content {
        width: calc(100% - 390px);
    }

    .pt-governance-section__visual {
        width: 350px;
        min-width: 350px;
        height: auto;
    }

    .pt-governance-section__visual-image {
        width: 100%;
        height: auto;
    }

    .pt-governance-section__title {
        font-size: 42px;
        line-height: 52px;
    }

    .pt-governance-section__subtitle {
        font-size: 18px;
    }

    .pt-governance-section__callout p {
        font-size: 16px;
    }

    .pt-governance-section__frameworks {
        margin-top: 70px;

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        row-gap: 20px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .pt-governance-section__container {
        padding: 70px 30px;
    }

    .pt-governance-section__top {
        align-items: center;
        gap: 30px;
    }

    .pt-governance-section__content {
        width: calc(100% - 320px);
    }

    .pt-governance-section__visual {
        width: 290px;
        min-width: 290px;
    }

    .pt-governance-section__title {
        font-size: 34px;
        line-height: 43px;
    }

    .pt-governance-section__subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .pt-governance-section__callout {
        padding: 14px;
        gap: 12px;
    }

    .pt-governance-section__callout-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

    .pt-governance-section__callout p {
        font-size: 16px;
        line-height: 24px;
    }

    .pt-governance-section__frameworks {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 16px;
    }

    .pt-governance-section__card {
        height: 160px;
    }

    .pt-governance-section__card span {
        font-size: 16px;
    }

}


/* =========================================================
   MOBILE
   BELOW 767px
   ========================================================= */

@media (max-width: 767px) {

    .pt-governance-section__glow {
        width: 250px;
        height: 250px;

        right: -80px;
        top: 150px;

        filter: blur(60px);
    }


    .pt-governance-section__container {
        padding: 55px 20px;
    }


    /* TOP BECOMES VERTICAL */

    .pt-governance-section__top {
        flex-direction: column;

        align-items: center;

        gap: 35px;
    }


    /* CONTENT */

    .pt-governance-section__content {
        width: 100%;

        align-items: flex-start;
    }


    .pt-governance-section__header {
        gap: 14px;
    }


    .pt-governance-section__title {
        width: 100%;

        font-size: 34px;
        line-height: 43px;

        text-align: left;
    }


    .pt-governance-section__subtitle {
        width: 100%;

        font-size: 18px;
        line-height: 28px;
    }


    /* CALLOUT */

    .pt-governance-section__callout {
        width: 100%;

        min-height: auto;

        padding: 16px;

        align-items: flex-start;
    }


    .pt-governance-section__callout-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
    }


    .pt-governance-section__callout p {
        font-size: 16px;
        line-height: 24px;
    }


    /* IMAGE */

    .pt-governance-section__visual {
        width: 100%;
        max-width: 500px;

        min-width: 0;

        height: auto;
    }


    .pt-governance-section__visual-image {
        width: 100%;
        height: auto;
    }


    /* FRAMEWORKS */

    .pt-governance-section__frameworks {
        width: 100%;

        margin-top: 45px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 15px;
    }


    .pt-governance-section__card {
        height: 165px;

        padding: 20px 12px 18px;

        gap: 12px;
    }


    .pt-governance-section__logo {
        width: 75px;
        height: 65px;
    }


    .pt-governance-section__logo--soc2 {
        width: 55px;
        height: 75px;
    }


    .pt-governance-section__card span {
        font-size: 15px;
        line-height: 20px;
    }

}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .pt-governance-section__container {
        padding: 45px 16px;
    }


    .pt-governance-section__top {
        gap: 30px;
    }


    .pt-governance-section__title {
        font-size: 30px;
        line-height: 38px;
    }


    .pt-governance-section__subtitle {
        font-size: 18px;
        line-height: 28px;
    }


    .pt-governance-section__callout {
        padding: 14px;

        gap: 10px;

        border-radius: 13px;
    }


    .pt-governance-section__callout-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;

        border-radius: 10px;
    }


    .pt-governance-section__callout-icon svg {
        width: 20px;
        height: 20px;
    }


    .pt-governance-section__callout p {
        font-size: 16px;
        line-height: 24px;
    }


    .pt-governance-section__frameworks {
        margin-top: 40px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 12px;
    }


    .pt-governance-section__card {
        height: 150px;

        padding: 16px 8px;

        gap: 10px;

        border-radius: 10px;
    }


    .pt-governance-section__logo {
        width: 65px;
        height: 60px;
    }


    .pt-governance-section__logo--soc2 {
        width: 50px;
        height: 68px;
    }


    .pt-governance-section__card span {
        font-size: 14px;
        line-height: 18px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
   BELOW 375px
   ========================================================= */

@media (max-width: 375px) {

    .pt-governance-section__container {
        padding-left: 14px;
        padding-right: 14px;
    }


    .pt-governance-section__title {
        font-size: 27px;
        line-height: 35px;
    }


    .pt-governance-section__subtitle {
        font-size: 18px;
        line-height: 28px;
    }


    .pt-governance-section__callout p {
        font-size: 16px;
        line-height: 24px;
    }


    .pt-governance-section__frameworks {
        gap: 10px;
    }


    .pt-governance-section__card {
        height: 140px;
    }


    .pt-governance-section__logo {
        width: 58px;
        height: 54px;
    }


    .pt-governance-section__logo--soc2 {
        width: 46px;
        height: 62px;
    }


    .pt-governance-section__card span {
        font-size: 13px;
        line-height: 17px;
    }

}

/* =========================================================
   TECHNOLOGY FOUNDATION SECTION
   ========================================================= */

.pt-technology-foundation {
    position: relative;

    width: 100%;

    box-sizing: border-box;

    padding: 0px 100px 100px 100px;

    background: linear-gradient(
        180deg,
        #FFFFFF 0%,
        #F8FAFC 100%
    );

    overflow: hidden;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.pt-technology-foundation__container {
    width: 100%;
    max-width: 1236px;

    margin: 0 auto;
}


/* =========================================================
   HERO
   Figma:
   width: 1236px
   height: 196px
   ========================================================= */

.pt-technology-foundation__hero {
    width: 100%;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 24px;
}


/* =========================================================
   TITLE
   Figma:
   50px / 52px
   Poppins 700
   ========================================================= */

.pt-technology-foundation__title {
    max-width: 980px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 50px;
    line-height: 52px;

    font-weight: 700;

    letter-spacing: 0;

    text-align: center;

    color: #070707;
}


.pt-technology-foundation__title span {
    background: linear-gradient(
        90deg,
        #070707 0%,
        #E98305 89.16%
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;

    color: transparent;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.pt-technology-foundation__description {
    max-width: 980px;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
    line-height: 34px;

    font-weight: 400;

    text-align: center;

    color: #070707;
}


/* =========================================================
   CATEGORY GRID
   ========================================================= */

.pt-technology-foundation__grid {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: stretch;
}


/* =========================================================
   CARD
   Figma:
   384 × 380
   padding: 28px
   border-bottom: 4px
   radius: 16px
   ========================================================= */

.pt-tech-card {
    position: relative;

    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    align-items: flex-start;

    padding: 28px;

    gap: 20px;

    background: #FFFFFF;

    border: 0;

    border-bottom: 4px solid #E98305;

    border-radius: 16px;

    box-shadow:
        0 8px 16px rgba(15, 23, 42, 0.07);

    overflow: hidden;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   WIDE DATA CARD
   Figma:
   792 × 380
   ========================================================= */

.pt-tech-card--wide {
    grid-column: span 2;
}


/* =========================================================
   CARD HOVER
   ========================================================= */

.pt-tech-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 14px 28px rgba(15, 23, 42, 0.10);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.pt-tech-card__header {
    width: 100%;

    min-height: 48px;

    display: flex;

    flex-direction: row;

    align-items: center;

    gap: 16px;
}


/* =========================================================
   CATEGORY ICON
   ========================================================= */

.pt-tech-card__icon {
    width: 48px;
    height: 48px;

    min-width: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(
        255,
        241,
        223,
        0.4
    );

    border-radius: 50%;
}


.pt-tech-card__icon svg {
    width: 24px;
    height: 24px;

    fill: none;

    stroke: #E98305;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.pt-tech-card__header h3 {
    flex: 1;

    margin: 0;
    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 24px;
    line-height: 36px;

    font-weight: 600;

    letter-spacing: -0.5px;

    color: #111827;
}


/* =========================================================
   LOGO AREA
   ========================================================= */

.pt-tech-card__logos {
    display: flex;

    flex-wrap: wrap;

    align-content: flex-start;

    gap: 16px;

    width: 100%;
}


/* =========================================================
   INDIVIDUAL LOGO BOX
   Figma:
   88 × 88
   ========================================================= */

.pt-tech-logo {
    width: 88px;
    height: 88px;

    min-width: 88px;

    box-sizing: border-box;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #FFFFFF;

    border: 1px solid #E2E8F0;

    border-radius: 8px;

    overflow: hidden;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.pt-tech-logo:hover {
    border-color: #E98305;

    transform: translateY(-2px);

    box-shadow:
        0 4px 10px rgba(15, 23, 42, 0.06);
}


.pt-tech-logo img {
    display: block;

    width: 42px;
    height: 42px;

    object-fit: contain;
}


/* =========================================================
   LOGO SIZE ADJUSTMENTS
   ========================================================= */

.pt-tech-card:nth-child(1)
.pt-tech-logo img {
    width: 42px;
    height: 42px;
}


.pt-tech-card:nth-child(4)
.pt-tech-logo img {
    max-width: 72px;
}


.pt-tech-card:nth-child(5)
.pt-tech-logo img {
    max-width: 54px;
}


/* =========================================================
   DESKTOP 1200+
   ========================================================= */

@media (min-width: 1200px) {

    .pt-technology-foundation__grid {
        grid-template-columns:
            repeat(3, minmax(0, 384px));

        justify-content: center;
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .pt-technology-foundation {
        padding: 80px 40px;
    }

    .pt-technology-foundation__title {
        font-size: 44px;
        line-height: 48px;
    }

    .pt-technology-foundation__description {
        font-size: 18px;
        line-height: 30px;
    }

    .pt-tech-card {
        padding: 24px;
    }

    .pt-tech-card__header h3 {
        font-size: 21px;
        line-height: 31px;
    }

    .pt-tech-logo {
        width: 76px;
        height: 76px;

        min-width: 76px;
    }

    .pt-tech-logo img {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .pt-technology-foundation {
        padding: 70px 30px;
    }


    .pt-technology-foundation__title {
        font-size: 38px;
        line-height: 44px;
    }


    .pt-technology-foundation__description {
        font-size: 17px;
        line-height: 28px;
    }


    .pt-technology-foundation__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 20px;
    }


    .pt-tech-card {

        padding: 22px;
    }


    /*
       Wide card becomes full width
    */

    .pt-tech-card--wide {
        grid-column: 1 / -1;
    }


    .pt-tech-card__header {
        gap: 12px;
    }


    .pt-tech-card__icon {
        width: 44px;
        height: 44px;

        min-width: 44px;
    }


    .pt-tech-card__header h3 {
        font-size: 20px;
        line-height: 29px;
    }


    .pt-tech-logo {
        width: 72px;
        height: 72px;

        min-width: 72px;
    }

}


/* =========================================================
   MOBILE
   BELOW 767px
   ========================================================= */

@media (max-width: 767px) {

    .pt-technology-foundation {
        padding: 55px 20px;
    }


    .pt-technology-foundation__hero {
        margin-bottom: 35px;
    }


    .pt-technology-foundation__title {
        width: 100%;

        font-size: 32px;
        line-height: 40px;
    }


    .pt-technology-foundation__description {
        width: 100%;

        font-size: 15px;
        line-height: 24px;
    }


    .desktop-break {
        display: none;
    }


    /* One card per row */

    .pt-technology-foundation__grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .pt-tech-card,
    .pt-tech-card--wide {
        grid-column: auto;

        width: 100%;

        padding: 22px;
    }


    .pt-tech-card__header {
        min-height: 48px;
    }


    .pt-tech-card__header h3 {
        font-size: 19px;
        line-height: 27px;
    }


    .pt-tech-card__logos {
        gap: 12px;
    }


    .pt-tech-logo {
        width: 72px;
        height: 72px;

        min-width: 72px;
    }


    .pt-tech-logo img {
        width: 38px;
        height: 38px;
    }

}


/* =========================================================
   SMALL MOBILE
   BELOW 480px
   ========================================================= */

@media (max-width: 480px) {

    .pt-technology-foundation {
        padding: 45px 16px;
    }


    .pt-technology-foundation__title {
        font-size: 29px;
        line-height: 36px;
    }


    .pt-technology-foundation__description {
        font-size: 14px;
        line-height: 22px;
    }


    .pt-tech-card {

        padding: 20px;

        border-radius: 14px;
    }


    .pt-tech-card__header {
        gap: 11px;
    }


    .pt-tech-card__icon {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }


    .pt-tech-card__icon svg {
        width: 21px;
        height: 21px;
    }


    .pt-tech-card__header h3 {
        font-size: 18px;
        line-height: 26px;
    }


    .pt-tech-card__logos {
        gap: 10px;
    }


    .pt-tech-logo {
        width: 68px;
        height: 68px;

        min-width: 68px;
    }


    .pt-tech-logo img {
        width: 36px;
        height: 36px;
    }

}


/* =========================================================
   VERY SMALL DEVICES
   BELOW 375px
   ========================================================= */

@media (max-width: 375px) {

    .pt-technology-foundation {
        padding-left: 14px;
        padding-right: 14px;
    }


    .pt-technology-foundation__title {
        font-size: 26px;
        line-height: 33px;
    }


    .pt-technology-foundation__description {
        font-size: 13px;
        line-height: 21px;
    }


    .pt-tech-card {

        padding: 18px;
    }


    .pt-tech-card__header h3 {
        font-size: 17px;
        line-height: 24px;
    }


    .pt-tech-logo {
        width: 62px;
        height: 62px;

        min-width: 62px;
    }


    .pt-tech-logo img {
        width: 33px;
        height: 33px;
    }

}

section.latest_sight {
    position: relative;
    z-index: 9;
    padding: 100px 50px;
}
section.faq {
    padding: 0px 50px 100px 50px;
    position: relative;
}

/* =========================================================
   PRIMOTECH - WHY CLIENTS TRUST US
   Scoped completely to this section
   ========================================================= */

.pt-trust-section {
    --pt-trust-blue: #001B44;
    --pt-trust-orange: #E98305;
    --pt-trust-white: #FFFFFF;

    position: relative;

    width: 100%;

    min-height: 855px;

    box-sizing: border-box;

    padding: 100px;

    background: #001B44;

    overflow: hidden;

    isolation: isolate;

    font-family: "Poppins", sans-serif;
}


/* =========================================================
   RESET
   ========================================================= */

.pt-trust-section *,
.pt-trust-section *::before,
.pt-trust-section *::after {
    box-sizing: border-box;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.pt-trust-section__bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    background-image:
        url("https://assets.primotech.com/wp-content/uploads/2026/09/image-1660685070.png");

    background-position: center center;

    background-repeat: no-repeat;

    background-size: cover;

    opacity: 1;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.pt-trust-section__container {
    position: relative;

    width: 100%;

    max-width: 1240px;

    min-height: 655px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 633px)
        minmax(0, 527px);

    align-items: center;

    gap: 80px;
}


/* =========================================================
   LEFT COLUMN
   ========================================================= */

.pt-trust-section__left {
    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    gap: 32px;
}


/* =========================================================
   HEADING
   ========================================================= */

.pt-trust-section__heading {
    width: 100%;
}


.pt-trust-section__heading h2 {
    width: 100%;

    max-width: 633px;

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 50px;

    line-height: 55px;

    font-weight: 700;

    letter-spacing: -1.2px;

    color: #FFFFFF;
}


/*
   Orange "Primotech"
*/

.pt-trust-section__heading h2 span {
    color: #E98305;
}


/* =========================================================
   LEFT IMAGE
   ========================================================= */

.pt-trust-section__visual {
    width: 100%;

    height: 458px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.pt-trust-section__visual img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: contain;

    object-position: center;
}


/* =========================================================
   SLIDER
   ========================================================= */

.pt-trust-slider {
    position: relative;

    width: 527px;

    max-width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;
}


/* =========================================================
   VIEWPORT
   ========================================================= */

.pt-trust-slider__viewport {
    position: relative;

    width: 498px;

    max-width: 100%;

    overflow: hidden;

    border-radius: 16px;
}


/* =========================================================
   TRACK
   ========================================================= */

.pt-trust-slider__track {
    display: flex;

    width: 100%;

    transform: translate3d(0, 0, 0);

    transition:
        transform 0.55s cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );

    will-change: transform;
}


/* =========================================================
   CARD
   Figma:
   498 × 530
   padding 32px
   gap 32px
   ========================================================= */

.pt-trust-card {
    flex: 0 0 100%;

    width: 100%;

    height: 530px;

    padding: 32px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 32px;

    margin: 0;

    background: #FFFFFF;

    border-radius: 16px;

    overflow: hidden;
}


/* =========================================================
   CARD IMAGE
   ========================================================= */

.pt-trust-card__image {
    width: 100%;

    height: 323px;

    flex: 0 0 323px;

    overflow: hidden;

    border-radius: 12px;
}


.pt-trust-card__image img {
    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.pt-trust-card__content {
    width: 100%;

    min-height: 111px;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 12px;
}


/* =========================================================
   CARD TITLE
   ========================================================= */

.pt-trust-card__content h3 {
    width: 100%;

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 24px;

    line-height: 24px;

    font-weight: 700;

    color: #000000;
}


/* =========================================================
   CARD DESCRIPTION
   ========================================================= */

.pt-trust-card__content p {
    width: 100%;

    margin: 0;

    padding: 0;

    font-family: "Poppins", sans-serif;

    font-size: 18px;

    line-height: 25px;

    font-weight: 400;

    color: #000000;
}


/* =========================================================
   ARROW BUTTONS
   ========================================================= */

.pt-trust-slider__arrow {
    position: absolute;

    z-index: 10;

    top: 50%;

    width: 52px;

    height: 52px;

    margin: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #E98305;

    border-radius: 50%;

    background: #FFFFFF;

    color: #E98305;

    box-shadow:
        0 4px 24px rgba(255, 255, 255, 0.7);

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.pt-trust-slider__arrow span {
    display: block;

    margin-top: -4px;

    font-family: Arial, sans-serif;

    font-size: 42px;

    line-height: 1;

    font-weight: 300;
}


/* Previous */

.pt-trust-slider__arrow--prev {
    left: -26px;
}


/* Next */

.pt-trust-slider__arrow--next {
    right: -26px;
}


/* =========================================================
   ARROW HOVER
   ========================================================= */

.pt-trust-slider__arrow:hover {
    background: #E98305;

    color: #FFFFFF;

    box-shadow:
        0 6px 28px rgba(255, 255, 255, 0.8);
}


.pt-trust-slider__arrow--prev:hover {
    transform: translateY(-50%) scale(1.06);
}


.pt-trust-slider__arrow--next:hover {
    transform: translateY(-50%) scale(1.06);
}


/* =========================================================
   PROGRESS BAR
   ========================================================= */

.pt-trust-slider__progress {
    position: relative;

    width: 498px;

    max-width: 100%;

    height: 7px;

    margin-top: 6px;

    border-radius: 4px;

    overflow: hidden;

    background: rgba(
        255,
        255,
        255,
        0.2
    );
}


/* Active progress */

.pt-trust-slider__progress-active {
    position: absolute;

    top: 0;

    left: 0;

    width: 25%;

    height: 100%;

    border-radius: 4px;

    background: #FFFFFF;

    transition:
        width 0.55s
        cubic-bezier(
            0.22,
            0.61,
            0.36,
            1
        );
}


/* =========================================================
   DESKTOP - 1200+
   ========================================================= */

@media (min-width: 1200px) {

    .pt-trust-section__container {
        grid-template-columns:
            minmax(0, 633px)
            minmax(0, 527px);
    }

}


/* =========================================================
   LAPTOP
   992px - 1199px
   ========================================================= */

@media (max-width: 1199px) {

    .pt-trust-section {
        min-height: auto;

        padding: 80px 50px;
    }


    .pt-trust-section__container {
        max-width: 1000px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(420px, 500px);

        gap: 45px;
    }


    .pt-trust-section__heading h2 {
        font-size: 42px;

        line-height: 48px;
    }


    .pt-trust-section__visual {
        height: 390px;
    }


    .pt-trust-slider {
        width: 100%;
    }


    .pt-trust-slider__viewport {
        width: min(498px, 100%);
    }


    .pt-trust-card {
        height: 500px;

        padding: 28px;

        gap: 26px;
    }


    .pt-trust-card__image {
        height: 300px;

        flex-basis: 300px;
    }


    .pt-trust-slider__progress {
        width: min(498px, 100%);
    }

}


/* =========================================================
   TABLET
   768px - 991px
   ========================================================= */

@media (max-width: 991px) {

    .pt-trust-section {
        padding: 70px 35px;
    }


    .pt-trust-section__container {
        max-width: 760px;

        grid-template-columns: 1fr;

        gap: 50px;
    }


    .pt-trust-section__left {
        align-items: center;

        text-align: center;
    }


    .pt-trust-section__heading h2 {
        max-width: 680px;

        margin: 0 auto;

        font-size: 42px;

        line-height: 48px;
    }


    .pt-trust-section__visual {
        height: auto;

        max-width: 650px;

        margin: 0 auto;
    }


    .pt-trust-section__visual img {
        max-height: 420px;
    }


    .pt-trust-slider {
        width: 100%;

        max-width: 560px;

        margin: 0 auto;
    }


    .pt-trust-slider__viewport {
        width: 100%;
    }


    .pt-trust-card {
        height: auto;

        min-height: 530px;
    }


    .pt-trust-card__image {
        width: 100%;

        height: 323px;

        flex-basis: 323px;
    }


    .pt-trust-slider__progress {
        width: 100%;
    }


    .pt-trust-slider__arrow--prev {
        left: -20px;
    }


    .pt-trust-slider__arrow--next {
        right: -20px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .pt-trust-section {
        min-height: auto;

        padding: 55px 20px 60px;
    }


    .pt-trust-section__container {
        width: 100%;

        display: flex;

        flex-direction: column;

        gap: 35px;
    }


    /* Heading */

    .pt-trust-section__heading {
        width: 100%;
    }


    .pt-trust-section__heading h2 {
        width: 100%;

        font-size: 34px;

        line-height: 41px;

        letter-spacing: -0.6px;

        text-align: left;
    }


    /* Illustration */

    .pt-trust-section__visual {
        width: 100%;

        height: auto;

        min-height: 250px;
    }


    .pt-trust-section__visual img {
        width: 100%;

        height: auto;

        max-height: 350px;

        object-fit: contain;
    }


    /* Slider */

    .pt-trust-slider {
        width: 100%;

        max-width: none;

        padding: 0;
    }


    .pt-trust-slider__viewport {
        width: 100%;

        border-radius: 14px;
    }


    /* Card */

    .pt-trust-card {
        width: 100%;

        height: auto;

        min-height: 470px;

        padding: 20px;

        gap: 20px;

        border-radius: 14px;
    }


    /* Card image */

    .pt-trust-card__image {
        width: 100%;

        height: auto;

        aspect-ratio: 452 / 270;

        flex: 0 0 auto;

        border-radius: 10px;
    }


    /* Card content */

    .pt-trust-card__content {
        min-height: auto;

        gap: 10px;
    }


    .pt-trust-card__content h3 {
        font-size: 21px;

        line-height: 26px;
    }


    .pt-trust-card__content p {
        font-size: 16px;

        line-height: 22px;
    }


    /* Progress */

    .pt-trust-slider__progress {
        width: 100%;

        height: 6px;

        margin-top: 8px;
    }


    /* Arrows */

    .pt-trust-slider__arrow {
        width: 44px;

        height: 44px;
    }


    .pt-trust-slider__arrow span {
        font-size: 34px;
    }


    .pt-trust-slider__arrow--prev {
        left: -12px;
    }


    .pt-trust-slider__arrow--next {
        right: -12px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .pt-trust-section {
        padding: 45px 16px 50px;
    }


    .pt-trust-section__heading h2 {
        font-size: 29px;

        line-height: 35px;
    }


    .pt-trust-section__container {
        gap: 28px;
    }


    .pt-trust-section__visual {
        min-height: 210px;
    }


    .pt-trust-section__visual img {
        max-height: 290px;
    }


    .pt-trust-card {
        min-height: 430px;

        padding: 16px;

        gap: 17px;
    }


    .pt-trust-card__image {
        aspect-ratio: 1.55 / 1;
    }


    .pt-trust-card__content h3 {
        font-size: 20px;

        line-height: 25px;
    }


    .pt-trust-card__content p {
        font-size: 16px;

        line-height: 21px;
    }


    .pt-trust-slider__arrow {
        width: 40px;

        height: 40px;
    }


    .pt-trust-slider__arrow span {
        font-size: 30px;
    }


    .pt-trust-slider__arrow--prev {
        left: -10px;
    }


    .pt-trust-slider__arrow--next {
        right: -10px;
    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

.pt-trust-slider__arrow:focus-visible {
    outline: 2px solid #FFFFFF;

    outline-offset: 3px;
}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

    .pt-trust-slider__track,
    .pt-trust-slider__progress-active,
    .pt-trust-slider__arrow {
        transition: none;
    }

}

/* ==========================================================
   GOOGLE AD GRANT MANAGEMENT FRAMEWORK
   ========================================================== */

.gag-framework-section {
    width: 100%;
    min-height: 904px;

    padding: 100px;

    background:
        linear-gradient(
            89.99deg,
            #057FFF 0.02%,
            #143A62 99.99%
        );

    overflow: hidden;

    font-family: "Poppins", sans-serif;

    box-sizing: border-box;
}

.gag-framework-section *,
.gag-framework-section *::before,
.gag-framework-section *::after {
    box-sizing: border-box;
}


/* ==========================================================
   MAIN CONTAINER
   ========================================================== */

.gag-framework-container {
    width: 100%;
    max-width: 1238px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 64px;
}


/* ==========================================================
   HEADER
   ========================================================== */

.gag-framework-header {
    width: 958px;
    max-width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 12px;

    text-align: center;
}


.gag-framework-title {
    width: 852px;
    max-width: 100%;

    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 50px;
    line-height: 62px;
    font-weight: 700;

    color: #ffffff;

    text-align: center;
}


.gag-framework-subtitle {
    width: 930px;
    max-width: 100%;

    margin: 0;

    font-family: "Poppins", sans-serif;
    font-size: 24px;
    line-height: 36px;
    font-weight: 500;

    color: #ffffff;

    text-align: center;
}


/* ==========================================================
   MAIN FRAMEWORK CARD
   ========================================================== */

.gag-framework-card {
    width: 1238px;
    max-width: 100%;

    height: 468px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    border-radius: 20px;

    overflow: hidden;

    background: #ffffff;

    box-shadow: none;
}


/* ==========================================================
   LEFT NAVIGATION
   ========================================================== */

.gag-framework-nav {
    width: 100%;
    height: 100%;

    padding: 24px 43px;

    display: flex;
    flex-direction: column;

    justify-content: flex-start;
    overflow-y: inherit;
}


/* ==========================================================
   NAVIGATION ITEM
   ========================================================== */

.gag-framework-item {
    position: relative;

    width: 100%;
    height: 70px;

    padding: 0;

    border: 0;
    outline: none;

    background: transparent;

    display: flex;
    align-items: center;

    gap: 22px;

    cursor: pointer;

    text-align: left;

    font-family: "Poppins", sans-serif;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Horizontal line */

.gag-framework-item:not(:last-child)::after {
    content: "";

    position: absolute;

    left: 51px;
    right: 0;

    bottom: 0;

    height: 1px;

    background: rgba(7, 7, 7, 0.8);
}


/* Number */

.gag-framework-number {
    width: 40px;
    flex: 0 0 40px;

    font-family: "Poppins", sans-serif;

    font-size: 24px;
    line-height: 22px;

    font-weight: 500;

    color: rgba(7, 7, 7, 0.8);
}


/* Name */

.gag-framework-name {
    font-family: "Poppins", sans-serif;

    font-size: 24px;
    line-height: 22px;

    font-weight: 500;

    color: rgba(7, 7, 7, 0.8);

    transition:
        color 0.2s ease,
        font-weight 0.2s ease;
}


/* ==========================================================
   ACTIVE ITEM
   ========================================================== */

.gag-framework-item.active .gag-framework-number,
.gag-framework-item.active .gag-framework-name {
    color: #070707;
}

.gag-framework-item.active .gag-framework-number,
.gag-framework-item.active .gag-framework-name {
    font-weight: 700;
}


/* ==========================================================
   RIGHT CONTENT
   ========================================================== */

.gag-framework-content {
    width: 100%;
    height: 100%;

    background: #000000;

    color: #ffffff;

    display: flex;
    align-items: center;
}


/* ==========================================================
   CONTENT INNER
   ========================================================== */

.gag-framework-content-inner {
    width: 493px;
    max-width: calc(100% - 80px);

    margin-left: 73px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


/* ==========================================================
   CONTENT ICON
   ========================================================== */

.gag-framework-icon {
    width: 75px;
    height: 75px;

    margin-bottom: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #057EFB;

    border-radius: 10px;

    overflow: hidden;
}


.gag-framework-icon svg {
    width: 47px;
    height: 47px;

    display: block;
}


/* ==========================================================
   CONTENT TITLE
   ========================================================== */

.gag-framework-content-title {
    margin: 0 0 18px;

    font-family: "Poppins", sans-serif;

    font-size: 24px;
    line-height: 22px;

    font-weight: 700;

    color: #ffffff;
}


/* ==========================================================
   CONTENT DESCRIPTION
   ========================================================== */

.gag-framework-content-description {
    width: 493px;
    max-width: 100%;

    margin: 0;

    font-family: "Poppins", sans-serif;

    font-size: 20px;
    line-height: 32px;

    font-weight: 400;

    color: #ffffff;
}


/* ==========================================================
   CONTENT ANIMATION
   ========================================================== */

.gag-framework-content-inner.content-changing {
    animation: gagFrameworkFade 0.25s ease;
}

@keyframes gagFrameworkFade {

    0% {
        opacity: 0;
        transform: translateY(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ==========================================================
   TABLET
   992px - 1199px
   ========================================================== */

@media (max-width: 1199px) {

    .gag-framework-section {
        min-height: auto;

        padding: 80px 40px;
    }

    .gag-framework-container {
        gap: 50px;
    }

    .gag-framework-title {
        font-size: 44px;
        line-height: 55px;
    }

    .gag-framework-subtitle {
        font-size: 21px;
        line-height: 32px;
    }

    .gag-framework-card {
        height: 440px;
    }

    .gag-framework-nav {
        padding: 35px 32px;
    }

    .gag-framework-item {
        height: 62px;
    }

    .gag-framework-number,
    .gag-framework-name {
        font-size: 21px;
        line-height: 24px;
    }

    .gag-framework-item:not(:last-child)::after {
        left: 47px;
    }

    .gag-framework-content-inner {
        margin-left: 45px;
        max-width: calc(100% - 70px);
    }

    .gag-framework-content-description {
        font-size: 17px;
        line-height: 28px;
    }

}


/* ==========================================================
   TABLET PORTRAIT
   768px - 991px
   ========================================================== */

@media (max-width: 991px) {

    .gag-framework-section {
        padding: 70px 28px;
    }

    .gag-framework-container {
        gap: 42px;
    }

    .gag-framework-title {
        font-size: 40px;
        line-height: 50px;
    }

    .gag-framework-subtitle {
        font-size: 19px;
        line-height: 29px;
    }

    .gag-framework-card {
        height: 430px;

        grid-template-columns: 44% 56%;
    }

    .gag-framework-nav {
        padding: 30px 25px;
    }

    .gag-framework-item {
        height: 62px;
        gap: 15px;
    }

    .gag-framework-number {
        width: 36px;
        flex-basis: 36px;

        font-size: 18px;
    }

    .gag-framework-name {
        font-size: 19px;
    }

    .gag-framework-item:not(:last-child)::after {
        left: 42px;
    }

    .gag-framework-content-inner {
        margin-left: 32px;
        max-width: calc(100% - 55px);
    }

    .gag-framework-icon {
        width: 65px;
        height: 65px;
    }

    .gag-framework-content-title {
        font-size: 21px;
        margin-bottom: 14px;
    }

    .gag-framework-content-description {
        font-size: 16px;
        line-height: 26px;
    }

}


/* ==========================================================
   MOBILE
   <= 767px
   ========================================================== */

@media (max-width: 767px) {

    .gag-framework-section {
        padding: 55px 18px;
    }

    .gag-framework-container {
        gap: 35px;
    }

    .gag-framework-title {
        width: 100%;

        font-size: 32px;
        line-height: 41px;
    }

    .gag-framework-subtitle {
        width: 100%;

        font-size: 18px;
        line-height: 28px;
    }


    /* ------------------------------------
       Change card into vertical layout
       ------------------------------------ */

    .gag-framework-card {
        width: 100%;
        height: auto;

        display: flex;
        flex-direction: column;

        border-radius: 16px;
    }


    /* ------------------------------------
       LEFT NAV
       ------------------------------------ */

    .gag-framework-nav {
        width: 100%;
        height: auto;

        padding: 12px 18px;
    }

    .gag-framework-item {
        height: 55px;

        gap: 13px;
    }

    .gag-framework-item:not(:last-child)::after {
        left: 37px;
    }

    .gag-framework-number {
        width: 30px;
        flex-basis: 30px;

        font-size: 16px;
        line-height: 20px;
    }

    .gag-framework-name {
        font-size: 17px;
        line-height: 22px;
    }


    /* ------------------------------------
       RIGHT CONTENT
       ------------------------------------ */

    .gag-framework-content {
        width: 100%;
        min-height: 360px;

        padding: 35px 24px;

        align-items: flex-start;
    }

    .gag-framework-content-inner {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
    }

    .gag-framework-icon {
        width: 60px;
        height: 60px;

        margin-bottom: 18px;

        border-radius: 9px;
    }

    .gag-framework-icon svg {
        width: 39px;
        height: 39px;
    }

    .gag-framework-content-title {
        font-size: 21px;
        line-height: 27px;

        margin-bottom: 14px;
    }

    .gag-framework-content-description {
        width: 100%;

        font-size: 16px;
        line-height: 25px;
    }

}


/* ==========================================================
   SMALL MOBILE
   <= 480px
   ========================================================== */

@media (max-width: 480px) {

    .gag-framework-section {
        padding: 45px 14px;
    }

    .gag-framework-container {
        gap: 28px;
    }

    .gag-framework-title {
        font-size: 28px;
        line-height: 36px;
    }

    .gag-framework-subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .gag-framework-nav {
        padding: 8px 14px;
    }

    .gag-framework-item {
        height: 52px;

        gap: 10px;
    }

    .gag-framework-item:not(:last-child)::after {
        left: 33px;
    }

    .gag-framework-number {
        width: 27px;
        flex-basis: 27px;

        font-size: 14px;
    }

    .gag-framework-name {
        font-size: 16px;
        line-height: 20px;
    }

    .gag-framework-content {
        min-height: 340px;

        padding: 28px 20px;
    }

    .gag-framework-icon {
        width: 56px;
        height: 56px;

        margin-bottom: 15px;
    }

    .gag-framework-icon svg {
        width: 36px;
        height: 36px;
    }

    .gag-framework-content-title {
        font-size: 19px;
        line-height: 25px;
    }

    .gag-framework-content-description {
        font-size: 16px;
        line-height: 23px;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
   <= 360px
   ========================================================== */

@media (max-width: 360px) {

    .gag-framework-title {
        font-size: 25px;
        line-height: 33px;
    }

    .gag-framework-subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .gag-framework-item {
        height: 49px;
    }

    .gag-framework-number {
        font-size: 13px;
    }

    .gag-framework-name {
        font-size: 15px;
    }

    .gag-framework-content {
        min-height: 350px;
    }

    .gag-framework-content-description {
        font-size: 16px;
        line-height: 22px;
    }

}

/* Remove all hover / focus / active effects from framework left items */

.gag-framework-item,
.gag-framework-item:hover,
.gag-framework-item:focus,
.gag-framework-item:focus-visible,
.gag-framework-item:active {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: 0 !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Prevent text color/font changes from theme styles */
.gag-framework-item:hover .gag-framework-number,
.gag-framework-item:hover .gag-framework-name,
.gag-framework-item:focus .gag-framework-number,
.gag-framework-item:focus .gag-framework-name,
.gag-framework-item:focus-visible .gag-framework-number,
.gag-framework-item:focus-visible .gag-framework-name,
.gag-framework-item:active .gag-framework-number,
.gag-framework-item:active .gag-framework-name {
    text-decoration: none !important;
}

/* Keep the active/clicked item styling only */
.gag-framework-item.active,
.gag-framework-item.active:hover,
.gag-framework-item.active:focus,
.gag-framework-item.active:focus-visible,
.gag-framework-item.active:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    outline: none !important;
}

/* ── SECTION ── */
.case-studies{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:clamp(50px,7vw,100px) clamp(16px,4vw,50px);
    padding-top: 0;
}

/* ── HEADER ── */
.cs-header {
  position: relative;
  text-align: center;
  margin-bottom: 48px;
}

.cs-label {
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #e04b8a;
  margin-bottom: 14px;
}

.cs-title {
    text-align: center;
    margin: 0 auto;
    font-style: normal;
    font-weight: 700;
    font-size: 50px;
    line-height: 62px;
    background: linear-gradient(90deg,#070707 0,#e98305 75.97%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    font-family: Poppins,sans-serif;
    max-width: 949px;
    padding-bottom: 16px;
}

.cs-subtitle {
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 34px;
    text-align: center;
    font-family: Poppins,sans-serif;
    color: #070707;
    margin: 16px 0 0;
    max-width: 824px;
    text-align: center;
    margin: 0 auto;
}

/* ── NAV BUTTONS ── */
.cs-nav {
  position: absolute;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  gap: 10px;
}

.cs-nav-btn {
    width: 64px;
    height: 64px;
    padding: 0;
    font-size: 50px;
    display: flex;
    justify-content: center;

    background: #FFFFFF;
    border: 1px solid #F1F3F6;
    border-radius: 50%;

    color: #0F172A;
    cursor: pointer;
    overflow: hidden;

    -webkit-appearance: none;
    appearance: none;
    outline: none;

    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.03),
        0 4px 12px rgba(16, 24, 40, 0.04),
        0 12px 30px rgba(16, 24, 40, 0.05);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

.cs-nav-btn:hover {
    background: #FFFFFF;
    border-color: #ECEFF3;
    color: #0F172A;
    transform: translateY(-1px);

    box-shadow:
        0 2px 4px rgba(16, 24, 40, 0.04),
        0 8px 20px rgba(16, 24, 40, 0.06),
        0 18px 40px rgba(16, 24, 40, 0.08);
}
.cs-nav-btn:focus {
    background: #FFFFFF;
    border-color: #ECEFF3;
    color: #0F172A;
}

.cs-nav-btn:active {
    transform: scale(0.97);
    box-shadow:
        0 2px 6px rgba(16,24,40,.05);
}

.cs-nav-btn:focus-visible {
    outline: none;
}

/* ── SLIDER WRAPPER ── */
.cs-slider-wrapper{
    width:100%;
    overflow:hidden;
    border-radius:20px;
}

.cs-track{
    display:flex;
    gap:20px;
    transition:transform .6s cubic-bezier(.4,0,.2,1);
    will-change:transform;
    align-items:stretch;
}

/* ── SLIDES ── */
.cs-slide{
    flex:0 0 calc(50% - 10px);
    min-width:calc(50% - 10px);
    display:flex;
    flex-direction:column;
    border-radius:20px;
    overflow:hidden;
    position:relative;
    min-height:480px;
    height: auto;
}

.cs-slide-inner {
  flex: 1;
  display: flex;
  align-items: stretch;
}

.cs-slide--dark {
    background:
        url("https://assets.primotech.com/wp-content/uploads/2026/07/wave-1-1.png") center center / cover no-repeat,
        linear-gradient(135deg, #2d3adf 0%, #4f5fe8 60%, #7b8ef8 100%);
}

.cs-slide--light {
    background:
        url("https://assets.primotech.com/wp-content/uploads/2026/07/wave-1-1.png") center center / cover no-repeat,
        #FEF0F4;
    border: 1px solid #F5D0DE;
}

.cs-slide--orange {
    background:
        url("https://assets.primotech.com/wp-content/uploads/2026/07/wave-1-1.png") center center / cover no-repeat,
        linear-gradient(
            90.4deg,
            #F8D5BA 0.13%,
            #FFF0DD 100.54%
        );
}

.cs-slide--navy {
    background:
        url("https://assets.primotech.com/wp-content/uploads/2026/07/wave-1-1.png") center center / cover no-repeat,
        linear-gradient(135deg, #0a2342 0%, #1a3a6b 60%, #2563eb 100%);
}

/* ── SLIDE CONTENT ── */
.cs-slide-content{
    flex:0 0 55%;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:0px;
    padding:24px 0px 0 24px;;
}

.cs-slide--dark .cs-slide-content,
.cs-slide--orange .cs-slide-content,
.cs-slide--navy .cs-slide-content {
  color: #fff;
}

.cs-slide--light .cs-slide-content {
  color: #0d1b3e;
}

/* TAG */
.cs-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  background: rgba(255,255,255,0.22);
  color: #fff;
  width: fit-content;
}

.cs-tag--pink {
  background: #FC96A433;
  color: #070707;
}

.cs-tag--orange {
  background: #FFFFFF;
  color: #070707;
}

.cs-tag--orange {
  background: #f97316;
  color: #fff;
}
.cs-tag--green {
  background: #BDFFC3;
  color: #070707;
}

.cs-case-label {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 4px;
}

.cs-slide-title {  
  font-family: Poppins;
  font-weight: 700;
  font-style: Bold;
  font-size: 22px;
  leading-trim: NONE;
  line-height: 30px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #FFFFFF;
  margin-top: 20px;
}
.cs-slide-title.cont-black {  
  font-family: Poppins;
  font-weight: 700;
  font-style: Bold;
  font-size: 22px;
  leading-trim: NONE;
  line-height: 30px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #070707;
}

.cs-slide-desc {
  font-family: Poppins;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: CAP_HEIGHT;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #FFFFFF;
  margin-bottom: 20px;
  margin-top: 20px;
}
.cs-slide-desc.cont-black {
  font-family: Poppins;
  font-weight: 400;
  font-style: Regular;
  font-size: 14px;
  leading-trim: CAP_HEIGHT;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #070707;
}

.cs-tech {
  margin-top: 0;
}

.cs-tech strong {
  font-family: Poppins;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #FFFFFF;
  margin-bottom: 3px;
}

.cs-tech p {
  font-family: Poppins;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #FFFFFF;
}

.cs-tech.cont-black strong {
  font-family: Poppins;
  font-weight: 700;
  font-style: Bold;
  font-size: 16px;
  leading-trim: NONE;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #070707;
  margin-bottom: 3px;
}

.cs-tech.cont-black p {
  font-family: Poppins;
  font-weight: 500;
  font-style: Medium;
  font-size: 14px;
  leading-trim: NONE;
  line-height: 20px;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #070707;
}

/* ── BUTTONS ── */
.cs-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px 22px;
    border-radius:10px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    width:max-content;
    max-width:100%;
}

.cs-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

.cs-btn--light {
  background: #fff;
  color: #0d1b3e;
}

.cs-btn--red {
  background: #EF2E4D;
  color: #fff;
}
.cs-btn--orange {
  background: #FD681D;
  color: #fff;
}
.cs-btn--green {
  background: #216809;
  color: #fff;
}
.cs-btn--white {
  background: rgba(255,255,255,0.18);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
}
/* Base Transition */
.cs-btn{
    transition: all .3s ease;
}

/* White Button */
.cs-btn--light:hover{
    background:#f5f5f5;
    color:#0d1b3e;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* Red Button */
.cs-btn--red:hover{
    background:#d92645;
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(239,46,77,.35);
}

/* Orange Button */
.cs-btn--orange:hover{
    background: #e85b12;
    color: #fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(253,104,29,.35);
}
.cs-btn--green:hover{
    background: #1b5a06;
    color: #fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(253,104,29,.35);
}

/* Transparent White Button */
.cs-btn--white:hover{
    background:#fff;
    color:#0d1b3e;
    border-color:#fff;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(255,255,255,.25);
}

/* Click Effect */
.cs-btn:active{
    transform:translateY(0) scale(.98);
}

.cs-btn-icon {
  font-size: 15px;
}

/* ── SLIDE IMAGE ── */
.cs-slide-image{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    min-height:280px;
}

.cs-slide-image img{
    width: 294px;
    height: 412px;
    object-fit:fill;
    object-position:bottom;
    display:block;
}

/* ── CORNER BUTTON ── */
.cs-corner-btn {
  position: absolute;
  bottom: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: #0d1b3e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: transform 0.2s;
  z-index: 2;
}

.cs-corner-btn--dark {
  background: #0d1b3e;
  color: #fff;
}

.cs-corner-btn:hover {
  transform: scale(1.1);
}

/* ── PER-SLIDE PROGRESS BAR ── */
.cs-slide-progress {
  height: 4px;
  width: 100%;
  background: rgba(255,255,255,0.25);
  position: relative;
  overflow: hidden;
}

.cs-slide--light .cs-slide-progress {
  background: #e3c4d2;
}

.cs-slide-progress-fill {
  height: 100%;
  width: 0%;
  background: #fff;
  transition: width 0.05s linear;
}

.cs-slide--light .cs-slide-progress-fill {
  background: #e04b8a;
}

/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (min-width:1600px){

    .case-studies{
        max-width:1500px;
    }

    .cs-slide{
        min-height:520px;
        height: auto;
    }

}


/* ==========================================================
   DESKTOP
========================================================== */

@media (max-width:1400px){

    .case-studies{
        padding:80px 40px;
    }

}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width:1200px){
    .cs-track {
        gap: 18px;
    }

    .case-studies{
        padding:70px 30px;
    }

    .cs-slide{
        min-height:430px;
        height: auto;
    }

    .cs-slide-content{
        padding:28px;
    }

}


/* ==========================================================
   TABLET LANDSCAPE
========================================================== */

@media (max-width:991px){

    .cs-track {
        gap: 16px;
    }

    .case-studies{
        padding:60px 24px;
    }

    .cs-header{
        margin-bottom:36px;
    }

    .cs-nav{
        position:static;
        transform:none;
        justify-content:center;
        margin-top:24px;
    }

    .cs-slide{
        flex:0 0 calc(50% - 10px);
        min-width:calc(50% - 10px);
        min-height:390px;
        height: auto;
    }

    .cs-slide-content{
        padding:24px;
        gap:12px;
    }

    .cs-slide-title{
        font-size:22px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:768px){
    .cs-track {
        gap: 12px;
    }

    .case-studies{
        padding:50px 20px;
    }

    .cs-header{
        margin-bottom:30px;
    }

    .cs-nav{
        margin-top:20px;
    }

    .cs-slide{

        flex:0 0 100%;
        min-width:100%;
        min-height:auto;

    }

    .cs-slide-inner{

        flex-direction:column;

    }

    .cs-slide-content{

        width:100%;
        flex:none;
        padding:24px;

    }

    .cs-slide-image{

        width:100%;
        height:260px;
        min-height:260px;

    }

    .cs-slide-title{

        font-size:24px;

    }

    .cs-slide-desc{

        font-size:14px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:576px){

    .case-studies{

        padding:40px 16px;

    }

    .cs-title{

        font-size:30px;

    }

    .cs-subtitle{

        font-size:18px;

    }

    .cs-label{

        font-size:10px;

    }

    .cs-slide-content{

        padding:20px;

    }

    .cs-slide-image{

        height:220px;
        min-height:220px;

    }

    .cs-slide-title{

        font-size:22px;

    }

    .cs-btn{

        width:100%;
        justify-content:center;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:400px){

    .case-studies{

        padding:32px 14px;

    }

    .cs-title{

        font-size:26px;

    }

    .cs-slide-content{

        padding:18px;

    }

    .cs-slide-image{

        height:180px;
        min-height:180px;

    }

    .cs-nav-btn{

        width:40px;
        height:40px;
        font-size:18px;

    }

}

/* Desktop */
.cs-mobile-tabs{
    display:block;
}

.cs-mobile-tabs .cs-tab-buttons{
    display:none;
}

/* Mobile Only */
@media (max-width:767px){
    .cs-mobile-tabs .cs-tab-buttons{
        display:block;
    }
    /* Image First */
    .cs-slide-inner{
        display:flex;
        flex-direction:column;
    }

    .cs-slide-image{
        order:1;
        width:100%;
        margin-bottom:0px;
        text-align:center;
    }

    .cs-slide-content{
        order:2;
    }

    .cs-slide-image img{
        max-width:240px;
        width:100%;
        margin:auto;
        display:block;
    }

    /* Tabs */

    .cs-tab-buttons{
        display:flex;
        gap:10px;
        margin:20px 0;
        border-bottom:1px solid rgba(255,255,255,.15);
    }

    .cs-tab-btn{
        appearance:none;
        background:none;
        border:none;
        padding:12px 18px;
        font-size:15px;
        font-weight:600;
        cursor:pointer;
        color:#9ca3af;
        position:relative;
    }

    .cs-mobile-tabs .cs-tab-buttons .cs-tab-btn.active{
        background-color:transparent;
        border-color: transparent;
    }

    .cs-mobile-tabs .cs-tab-buttons .cs-tab-btn.active:focus{
        background-color:transparent;
        border-color: transparent;
    }

    .cs-tab-btn.active{
        color:#fff;
    }

    .cs-slide--light .cs-tab-btn.active,
    .cs-slide--orange .cs-tab-btn.active{
        color:#000;
    }

    .cs-tab-btn.active::after{
        content:"";
        position:absolute;
        left:0;
        bottom:-1px;
        width:100%;
        height:2px;
        background:#ff5b2e;
    }

    .cs-tab-content{
        display:none;
        animation:fadeTab .3s ease;
    }

    .cs-tab-content.active{
        display:block;
    }

    /* Hide desktop tech block */

    .cs-mobile-tabs .cs-tech{
        margin-top:0;
    }

}

@keyframes fadeTab{

    from{
        opacity:0;
        transform:translateY(10px);
    }

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

}

/* Desktop Navigation */
.cs-nav {
    display: flex;
}

/* Mobile Navigation */
.cs-nav-mobile {
    display: none;
}


.cs-slide.cs-slide--green {
    background: #ecf3e7;
}
section.mobile_app_card{
    padding: 0px 50px 100px 50px;
}
.mobile_app_tile img {
    width: 99.53854370117188px;
    height: 93.68333435058594px;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    border: 1.5px solid #12477D;
    border-radius: 6px;
    padding: 24px;
    background-color: #ffffff;
}

.next_gen_emerging.next-gen-sec .container_cstm p {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 24px;
    font-family: Poppins, sans-serif;
}
section.start_your_app .container_cstm p {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 24px;
    font-family: Poppins, sans-serif;
}
section.start_your_app h2 {
    margin: 0 0 10px;
}
section.next_gen_emerging .container_cstm h2 {
    margin: 0 auto 20px;
}
.gen_emerging_col img {
    /* width: 62px;  */
    width: 72px;
    border-radius: 80px !important;
    border: 1px solid #fff;
    border-radius: 4px;
}

section.start_your_app .container_cstm .row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: left;
    position: relative;
}
.start_app_card {
    width: calc(33% - 9px);
    padding: 40px 20px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #fff;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
}

section.mobile_app_technical .container_cstm h2{
    text-align: center;
    font-size: 50px;
    line-height: 60px;
    font-style: normal;
    font-weight: 700;
    font-family: Poppins, sans-serif;
    color: #fff;
}
section.mobile_app_technical .container_cstm p{
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 24px;
    font-family: Poppins, sans-serif;
    color: #fff;
}
.card_fliper_head {
    padding: 0;
    border-radius: 0;
    background-image: url("https://assets.primotech.com/wp-content/themes/astra-child/assets/images/wave 1.png");
    background-size: cover;
}
section.mobile_app_technical {
    padding: 100px 50px;
}

section.mobile_app_technical .flip_card_apper .card_in .flip-card-inner .flip-card-back img{
    padding-top: 20px;
}
.flip-card-inner {
    box-shadow: none;
}
.flip-card-front img {
    height: 100%;
    width: 70%;
}
.flip-card-back{
    display: block;
}
.flip-card-back img{
        padding: 20px 10px 0 10px;
}

/* Hide FAQs after the first 5 */
.faq .accordian_in .accord_tab:nth-child(n + 6) {
    display: none;
}

/* Show all FAQs after clicking Expand */
.faq .faq_contain.faq-expanded .accordian_in .accord_tab:nth-child(n + 6) {
    display: block;
}

/* Hide the expand overlay after expanding */
.faq .faq_contain.faq-expanded .faq_blur_box {
    display: none;
}

/* Make Click to Expand clickable */
.faq .click_more {
    cursor: pointer;
}

section.start_your_app .container_cstm .row .start_app_card p {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 20px;
    font-family: Poppins, sans-serif;
    line-height: 30px;
}
.accord_tab .panel p, .accord_tab button{
    font-size: 20px;
}

.next_gen_emerging.next-gen-sec .container_cstm .row .gen_emerging_col p {
    text-align: center;
    padding-bottom: 10px;
    font-weight: 400;
    font-size: 20px;
    font-family: Poppins, sans-serif;
}

@media (max-width: 1024px) {

    .start_app_card {
        width: calc(50% - 9px);
        padding: 40px 20px;
        background: #fff;
        border-radius: 16px;
        border: 1px solid #fff;
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }
}
@media (max-width: 767px) {

    /* Hide top navigation */
    .cs-header .cs-nav {
        display: none;
    }

    /* Show bottom navigation */
    .cs-nav-mobile {
        display: flex;
        justify-content: center;
        gap: 16px;
        margin-top: 24px;
        width: 100%;
    }

    .cs-nav-mobile .cs-nav-btn {
        gap: 18px;
        padding-bottom: 12px;
        margin-top: 24px;
        width: 58px;
        height: 58px;
        border: 1px solid #ececec;
        border-radius: 50%;
        background: #ffffff;
        color: #1b2745;
        font-size: 50px;
        font-weight: 700;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(20, 20, 20, 0.08),
            0 2px 6px rgba(20, 20, 20, 0.04);
    }
    .next_gen_emerging.next-gen-sec .container_cstm p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        font-family: Poppins, sans-serif;
    }
    section.start_your_app .container_cstm p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        font-family: Poppins, sans-serif;
    }
    section.start_your_app .container_cstm .row{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        justify-content: flex-start;
        position: relative;
    }
    .start_app_card {
        width: 100%;
    }
    section.start_your_app .container_cstm p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 20px;
        font-family: Poppins, sans-serif;
    }
    section.mobile_app_technical .container_cstm h2 {
        text-align: center;
        font-size: 30px;
        line-height: 46px;
        font-style: normal;
        font-weight: 700;
        font-family: Poppins, sans-serif;
        color: #fff;
    }
    section.mobile_app_technical .container_cstm p {
        text-align: center;
        padding-top: 10px;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        font-family: Poppins, sans-serif;
        color: #fff;
    }
    .next_gen_emerging.next-gen-sec .container_cstm p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        font-family: Poppins, sans-serif;
        line-height: 28px;
    }
    .next_gen_emerging.next-gen-sec .container_cstm .row .gen_emerging_col p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 16px;
        font-family: Poppins, sans-serif;
    }
    .cs-nav-mobile .cs-nav-btn {
        gap: 18px;
        padding-bottom: 4px;
        margin-top: 24px;
        width: 58px;
        height: 58px;
        border: 1px solid #ececec;
        border-radius: 50%;
        background: #ffffff;
        color: #1b2745;
        font-size: 50px;
        font-weight: 400;
        line-height: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 8px 20px rgba(20, 20, 20, 0.08),
                0 2px 6px rgba(20, 20, 20, 0.04);
    }
    section.start_your_app .container_cstm p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 18px;
        font-family: Poppins, sans-serif;
    }
    section.start_your_app .container_cstm .row .start_app_card p {
        text-align: center;
        padding-bottom: 10px;
        font-weight: 400;
        font-size: 16px;
        font-family: Poppins, sans-serif;
        line-height: 24px;
    }
    .faq .container_cstm .faq_contain .accordian_in .accord_tab .accordion p {
        font-size: 16px;
        line-height: 120%;
    }
    .faq .container_cstm .faq_contain .accordian_in .accord_tab .panel.show p {
        font-size: 16px !important;
        line-height: 140% !important;
    }
    .pt-who-we-advise__intro {
        font-size: 18px;
        line-height: 28px;
    }
    .client_say_in h2, section.faq h2, section.latest_sight h2 {
        font-size: 30px;
        line-height: 40px;
    }
    .faq .container_cstm h2 {
        font-size: 30px;
        line-height: 130%;
    }

    .pt-ai-service-card {
      height: auto !important;
    }
    .pt-ai-service-card p {
      line-height: 26px;
    }
    .pt-who-we-advise__card-title {
      min-height: auto !important;
    }
}


.start_app_card {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    align-items: center;
    text-align: center;
    background: rgb(255, 255, 255);
    border-radius: 25.3214px;
    padding: 36px 30px;
    border-width: 1px;
    border-style: solid;
    border-color: rgb(14, 57, 96);
    border-image: none;
    transition: 0.5s;
}
.start_app_card:hover {
    box-shadow: none;
    background-color: rgb(14, 57, 96);
    cursor: pointer;
    color: #fff;
}
.start_app_card:hover h3 {
    color: #fff;
}
.start_app_card:hover p {
    color: #fff;
}

section.certificate .container_cstm .brand_logo.brand_logo_desktop img {
		vertical-align: middle;
		height: 107px;
		width: 220px;
		background: #F5F5F5;
		border-radius: 10px;
	}
	.brand_logo_mobile_in>img {
		max-height: 70px;
		object-fit: contain;
		flex-grow: 1;
		background-color: #f5f5f5;
		border-radius: 10px;
		width: 47%;
	}
    img.pt-ai-service-included__icon {
    width: 32px;
    height: 32px;
}