.xl-pf-detail-header {
	--xl-pf-accent: #2f8fe0;
	margin-bottom:50px;
}

.xl-pf-detail-title {
	font-size: 2rem;
	font-weight: 800;
	margin: 0 0 18px;
	text-align: center;
}

.xl-pf-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 8px;
}

.xl-pf-tab {
	display: inline-block;
	padding: 10px 24px;
	border: 1px solid #e2e5ec;
	border-radius: 999px;
	background: #fff;
	color: #384252;
	text-decoration: none;
	font-size: .92rem;
	font-weight: 500;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.xl-pf-tab:hover {
	border-color: var(--xl-pf-accent);
	color: var(--xl-pf-accent);
}

.xl-pf-tab.is-active {
	background: var(--xl-pf-accent);
	border-color: var(--xl-pf-accent);
	color: #fff;
}

.xl-pf-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
}

/* NOTE: the single-column (<=640px) card overrides live at the END of this
   file, so they come after the base .xl-pf-card rules and actually win the
   cascade (equal specificity → source order decides). */

.xl-pf-card {
	--xl-pf-accent: #2f8fe0;

	display: flex;
	align-items: stretch;
	gap: 16px;
	padding: 16px;
	border: 1px solid #edeff3;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 10px rgba(20, 30, 60, .04);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* Entrance reveal ------------------------------------------------------------
   Cards start hidden and cascade into view as the grid scrolls into the
   viewport (the .xl-in-view class is toggled by xl-portfolio-detail.js, with a
   per-card --xl-pf-delay for the stagger). animation-fill-mode is `backwards`
   so the delay holds the hidden `from` state (no pre-flash) while the resting
   state after the animation comes from the .xl-in-view declaration below —
   that keeps the :hover transform working once the reveal has finished. */
.xl-pf-card {
	opacity: 0;
	transform: translateY(28px) scale(.98);
	will-change: opacity, transform;
}

.xl-pf-card.xl-in-view {
	opacity: 1;
	transform: translateY(0) scale(1);
	animation: xlPfCardReveal .65s cubic-bezier(.16, 1, .3, 1) var(--xl-pf-delay, 0ms) backwards;
}

@keyframes xlPfCardReveal {
	from {
		opacity: 0;
		transform: translateY(28px) scale(.98);
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.xl-pf-card:hover {
	transform: translateY(-4px);
	border-color: var(--xl-pf-accent);
	box-shadow: 0 16px 32px -12px rgba(20, 30, 60, .16);
}

/* Premium hover micro-interactions */
.xl-pf-card__thumb img {
	transition: transform .4s cubic-bezier(.16, 1, .3, 1);
}

.xl-pf-card:hover .xl-pf-card__thumb img {
	transform: scale(1.06);
}

.xl-pf-card__button svg {
	transition: transform .25s ease;
}

.xl-pf-card:hover .xl-pf-card__button svg {
	transform: translateX(3px);
}

/* Respect users who prefer reduced motion: show everything, animate nothing. */
@media (prefers-reduced-motion: reduce) {
	.xl-pf-card {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	.xl-pf-card.xl-in-view {
		animation: none;
	}

	.xl-pf-card:hover {
		transform: none;
	}

	.xl-pf-card:hover .xl-pf-card__thumb img,
	.xl-pf-card:hover .xl-pf-card__button svg {
		transform: none;
	}
}

.xl-pf-card__link {
	flex: 0 0 40%;
	display: block;
	width: auto;
}

/* A real thumbnail has no box of its own — the <img> dictates the size, at
   the column's full width, so the whole image is always visible with no
   cropping and no background box showing behind/around it. */
.xl-pf-card__thumb {
	display: block;
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.xl-pf-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
}

/* The gradient + centered icon only apply to the true empty state (no
   thumbnail set at all), which has no image to size itself against. */
.xl-pf-card__thumb-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 150px;
	padding: 8px;
	border-radius: 12px;
	overflow: hidden;
	background:
		radial-gradient(120% 100% at 12% 15%, rgba(150, 195, 255, .55), transparent 60%),
		radial-gradient(120% 100% at 88% 85%, rgba(120, 175, 250, .45), transparent 60%),
		linear-gradient(160deg, #eef6ff, #dceafe);
	border: 1px solid #dfe6f2;
}

.xl-pf-card__body {
	flex: 1 1 60%;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.xl-pf-card__title {
	font-size: 26px;
	font-weight: 700;
	color: #171a21;
}

.xl-pf-card__subtitle {
	font-size: 16px;
	font-weight: 600;
	color: var(--xl-pf-accent);
}

.xl-pf-card__desc {
	font-size: 16px;
	color: #667085;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.xl-pf-card__footer {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	align-items: center;
	/* Centred at every width so the icon + button are never left-aligned,
	   regardless of whether the card is stacked (mobile/tablet) or horizontal
	   (desktop). */
	justify-content: start;
	gap: 12px;
}

.xl-pf-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: #f8f8f8;
	color: #778aa9;
}

.xl-pf-card__icon svg {
	width: 30px;
	height: 30px;
	display: block;
}

.xl-pf-grid .xl-pf-card__button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 30px;
	border-radius: 999px;
	background: linear-gradient(190deg, #EDF8FF 0%, #35B6FF 100%) !important;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none !important;
	border: 0;
	color: #191919;
}

.xl-pf-grid .xl-pf-card__button svg {
	/* stroke: #fff !important; */
}

.xl-pf-card__button,
.xl-pf-card__button:hover,
.xl-pf-card__button:focus,
.xl-pf-card__button:hover *,
.xl-pf-card__button:focus * {
	text-decoration: none !important;
}

/* .xl-pf-grid .xl-pf-card__button:hover,
.xl-pf-grid .xl-pf-card__button:focus {
	background: linear-gradient(90deg, #3f98e0 0%, #285fc0 100%) !important;
	color: #fff !important;
} */

.xl-pf-empty {
	text-align: center;
	color: #667085;
	padding: 40px 0;
}

.xl-pf-pagination {
	display: flex;.xl-pfn-tech__group
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 40px;
	margin-bottom: 40px;
}

.xl-pf-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 10px;
	border: 1px solid #e2e5ec;
	border-radius: 10px;
	background: #fff;
	color: #384252;
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.xl-pf-page-btn:hover {
	border-color: #2f8fe0;
	color: #2f8fe0;
}

.xl-pf-page-btn.is-active {
	background: #2f8fe0;
	border-color: #2f8fe0;
	color: #fff;
}

.xl-pf-page-btn--edge svg {
	width: 16px;
	height: 16px;
	display: block;
}

.xl-pf-page-dots {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 40px;
	color: #98a2b3;
	font-size: .9rem;
}

/* Tablet: BeTheme caps .section_wrapper at ~708px with 40px side padding and
   auto side margins, leaving a lot of empty space on the left/right that made
   the two-up cards look small. On the portfolio category pages only, widen the
   wrapper to the full content width with modest padding so the 2 cards fill the
   row properly. Scoped to the tax-portfolio-types body class + tablet range. */
@media (min-width: 641px) and (max-width: 1200px) {
	.tax-portfolio-types #Content .section_wrapper {
		max-width: none;
		margin-left: auto;
		margin-right: auto;
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
}

@media (max-width: 480px) {
	.xl-pf-detail-title {
		font-size: 1.5rem;
	}

	.xl-pf-card__thumb-placeholder {
		min-height: 100px;
	}
}

.img.mfp-img{
	max-height:75% !important;
}

/* ---------------------------------------------------------------------------
   Single-column card layout (<=640px, one card per row). Placed at the end so
   these override the base .xl-pf-card rules above (equal specificity → later
   wins). Stacks the card vertically: full-width thumbnail on top, then title +
   description, then the icon and button together, centred, on the last line.
--------------------------------------------------------------------------- */
/* Grid collapses to a single column only on phones. */
@media (max-width: 640px) {
	.xl-pf-grid {
		grid-template-columns: 1fr;
	}
}

/* Stacked card INNER design on phones AND tablets (<=1200px, incl. landscape
   tablets). Tablet keeps two cards per row (the grid stays 2-col above 640px)
   but each card is stacked the same way as mobile: full-width thumbnail on top,
   then title + description, then the icon and button centred together on the
   last line. Desktop (>1200px) keeps the horizontal card. */
@media (max-width: 1200px) {
	.xl-pf-card {
		flex-direction: column;
		align-items: stretch;
	}

	.xl-pf-card__link {
		flex: 0 0 auto;
		width: 100%;
	}

	.xl-pf-card__title {
		font-size: 22px;
		line-height: 1.2;
	}

	/* More breathing room between title / technology / description. */
	.xl-pf-card__body {
		gap: 10px;
	}

	
}
@media (max-width: 1023px){
	/* Smaller icon, and icon + button centred together on the last line. */
	.xl-pf-card__footer {
		justify-content: start;
	}

	.xl-pf-card__icon {
		width: 44px;
		height: 44px;
	}

	.xl-pf-card__icon svg {
		width: 24px;
		height: 24px;
	}

}
@media (max-width: 765px){
	/* Smaller icon, and icon + button centred together on the last line. */
	.xl-pf-card__footer {
		justify-content: center;
	}

	
}