/* Griffex Brand Fonts */
@font-face {
	font-family: 'NeueHaasUnica';
	src: url('fonts/griffex/NeueHaasUnica-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'NeueHaasUnica';
	src: url('fonts/griffex/NeueHaasUnica-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Denton';
	src: url('fonts/griffex/DentonTextCondTest-Regular.otf') format('opentype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Denton';
	src: url('fonts/griffex/DentonTextCondTest-Bold.otf') format('opentype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'DentonVariable';
	src: url('fonts/griffex/DentonVariableTest-VF.ttf') format('truetype');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* Func-desc cards — uniform height */
.func-desc {
	height: 100%;
}

.func-desc .card-body {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.func-desc .card-title {
	min-height: 3em;
	display: flex;
	align-items: center;
	justify-content: center;
}

.func-desc .card-body > p {
	flex-grow: 1;
}

/* Font overrides — ensure Griffex fonts apply over theme defaults */
body {
	font-family: 'NeueHaasUnica', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.alternative-font-4,
.custom-font-secondary {
	font-family: 'Denton', serif !important;
}

/* ─── Mobile / Small-screen Fixes ───────────────────────────────────────── */

/* Fix 1: Hero slide — shift background-position left so the Griffex isotype
   (located on the left half of slide-1.png / slide-2.png) is visible on mobile. */
@media (max-width: 767px) {
	.owl-carousel-wrapper .background-image-wrapper {
		background-position: 25% center !important;
	}
}

/* Fix 2: Parallax quote section — reset the transform-based centering that
   overflows narrow viewports, and scale down the large quote font. */
@media (max-width: 767px) {
	/* Porto creates a .parallax-background div and sets background-image + cover
	   via JS but never sets background-position, so it defaults to 0% 0%.
	   Override it to left center so the full "Griffex" word is visible on mobile. */
	.section.parallax .parallax-background {
		background-position: 70% center !important;
	}

	.scrollable-parallax-wrapper {
		overflow: visible;
		width: 100%;
	}

	.custom-container-position-1 {
		transform: none !important;
		left: auto !important;
		position: static !important;
	}

	.custom-container-style-1 {
		min-width: unset !important;
		width: 100%;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	/* text-9 (Porto utility) is too large on mobile for running quote text */
	.section.parallax .custom-font-secondary {
		font-size: 1.5rem !important;
		line-height: 1.6 !important;
	}
}

/* Fix 3: Func-desc carousel — collapse fixed height so no white space appears
   below the carousel dots on small screens; reduce the negative overlap margin. */
@media (max-width: 767px) {
	#func-desc-wrapper {
		height: auto !important;
		margin-top: -40px !important;
	}
}