/* ========================================
   OPTION 1: Gradient Mesh with Glassmorphism & Background Image Support
   ======================================== */

/*
 * CUSTOMIZATION GUIDE - Option 1
 * ===============================
 *
 * Use CSS custom properties to easily customize Option 1 styles.
 * Override these variables in your theme's custom CSS or inline styles:
 *
 * BACKGROUND & GRADIENTS:
 * --pt-bg-gradient-start: #667eea;        // Starting gradient color
 * --pt-bg-gradient-end: #764ba2;          // Ending gradient color
 * --pt-bg-gradient-direction: 135deg;     // Gradient direction
 * --pt-bg-overlay-opacity: 0.7;           // Background image overlay opacity
 * --pt-bg-blend-mode: overlay;            // Background blend mode
 *
 * MESH GRADIENT COLORS:
 * --pt-mesh-color-1: rgba(120, 119, 198, 0.3);  // First mesh color
 * --pt-mesh-color-2: rgba(255, 99, 132, 0.2);   // Second mesh color
 * --pt-mesh-color-3: rgba(99, 179, 237, 0.25);  // Third mesh color
 * --pt-mesh-position-1: 20% 50%;                 // First mesh position
 * --pt-mesh-position-2: 80% 80%;                 // Second mesh position
 * --pt-mesh-position-3: 40% 20%;                 // Third mesh position
 *
 * GLASSMORPHISM EFFECTS:
 * --pt-glass-blur: 10px;                         // Backdrop blur amount
 * --pt-glass-bg: rgba(255, 255, 255, 0.05);     // Glass background
 * --pt-glass-border: rgba(255, 255, 255, 0.1);  // Glass border color
 * --pt-glass-border-radius: 20px;               // Glass border radius
 * --pt-glass-padding: 40px;                     // Glass container padding
 *
 * TYPOGRAPHY:
 * --pt-title-color: #ffffff;                    // Main title color
 * --pt-title-size: 60px;                       // Title font size
 * --pt-title-line-height: 70px;               // Title line height
 * --pt-title-weight: 700;                     // Title font weight
 * --pt-title-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);  // Title text shadow
 *
 * ANIMATIONS:
 * --pt-animation-duration: 15s;               // Mesh animation duration
 * --pt-animation-timing: ease;               // Animation timing function
 *
 * USAGE EXAMPLES:
 *
 * 1. Warm Orange Theme:
 * .page-title.option-1 {
 *   --pt-bg-gradient-start: #ff7e5f;
 *   --pt-bg-gradient-end: #feb47b;
 *   --pt-mesh-color-1: rgba(255, 126, 95, 0.3);
 *   --pt-mesh-color-2: rgba(254, 180, 123, 0.2);
 * }
 *
 * 2. Cool Blue Theme:
 * .page-title.option-1 {
 *   --pt-bg-gradient-start: #2196f3;
 *   --pt-bg-gradient-end: #21cbf3;
 *   --pt-mesh-color-1: rgba(33, 150, 243, 0.3);
 * }
 *
 * 3. Background Image with Custom Overlay:
 * .page-title.option-1 {
 *   background-image: url('your-image.jpg');
 *   --pt-bg-overlay-opacity: 0.8;
 *   --pt-bg-blend-mode: multiply;
 * }
 */

/* CSS Variables for Easy Customization */
.page-title.option-1 {
	/* Background & Gradient Variables */
	--pt-bg-gradient-start: #243e73;
	--pt-bg-gradient-end: #355baa;
	--pt-bg-gradient-direction: 135deg;
	--pt-bg-overlay-opacity: 0.7;
	--pt-bg-blend-mode: overlay;

	/* Mesh Gradient Variables */
	--pt-mesh-color-1: #243e734d;
	--pt-mesh-color-2: #355baa33;
	--pt-mesh-color-3: #355baa40;
	--pt-mesh-position-1: 20% 50%;
	--pt-mesh-position-2: 80% 80%;
	--pt-mesh-position-3: 40% 20%;

	/* Glassmorphism Variables */
	--pt-glass-blur: 10px;
	--pt-glass-bg: rgba(255, 255, 255, 0.051);
	--pt-glass-border: rgba(255, 255, 255, 0.1);
	--pt-glass-border-radius: 20px;
	--pt-glass-padding: 40px;

	/* Typography Variables */
	--pt-title-color: var(--theme-color,#243e73);
	--pt-title-size: 60px;
	--pt-title-line-height: 70px;
	--pt-title-weight: 700;
	--pt-title-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);

	/* Breadcrumb Variables */
	--pt-breadcrumb-color: rgba(255, 255, 255, 0.9);
	--pt-breadcrumb-link-color: rgba(255, 255, 255, 0.85);
	--pt-breadcrumb-hover-color: #ffffff;
	--pt-breadcrumb-hover-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
	--pt-breadcrumb-size: 18px;

	/* Spacing Variables */
	--pt-padding-top: 100px;
	--pt-padding-bottom: 100px;

	/* Animation Variables */
	--pt-animation-duration: 15s;
	--pt-animation-timing: ease;

	/* Implementation */
	position: relative;
	background: linear-gradient(var(--pt-bg-gradient-direction), var(--pt-bg-gradient-start) 0%, var(--pt-bg-gradient-end) 100%);
	padding: var(--pt-padding-top) 0px var(--pt-padding-bottom) 0px;
	overflow: hidden;
}

/* Background Image Support */
.page-title.option-1[style*="background-image"] {
	background-blend-mode: var(--pt-bg-blend-mode);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}


/* Ensure mesh is above background image overlay */
.page-title.option-1[style*="background-image"]::before {
	z-index: 3;
}

@keyframes gradientShift {
	0%, 100% {
		transform: translateY(0) scale(1);
	}
	50% {
		transform: translateY(-20px) scale(1.1);
	}
}

/* Glassmorphism Content Box */
.page-title.option-1 .content-box {
	position: relative;
	z-index: 4;
	backdrop-filter: blur(var(--pt-glass-blur));
	-webkit-backdrop-filter: blur(var(--pt-glass-blur));
	background: var(--pt-glass-bg);
	border-radius: var(--pt-glass-border-radius);
	padding: var(--pt-glass-padding);
	border: 1px solid var(--pt-glass-border);
}

/* Enhanced glassmorphism for background image variants */
.page-title.option-1[style*="background-image"] .content-box {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Typography Styles */
.page-title.option-1 .content-box h1 {
	position: relative;
	display: block;
	font-size: var(--pt-title-size);
	line-height: var(--pt-title-line-height);
	font-weight: var(--pt-title-weight);
	margin-bottom: 10px;
	color: var(--pt-title-color);
	text-shadow: var(--pt-title-shadow);
}

.page-title.option-1 .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: var(--pt-breadcrumb-size);
	color: var(--pt-breadcrumb-color);
	padding-right: 13px;
	margin-right: 2px;
}

.page-title.option-1 .bread-crumb li a {
	color: var(--pt-breadcrumb-link-color);
	transition: all 0.3s ease;
}

.page-title.option-1 .bread-crumb li a:hover {
	color: var(--pt-breadcrumb-hover-color);
	text-shadow: var(--pt-breadcrumb-hover-shadow);
}


/* ========================================
   OPTION 2: Geometric Pattern with Dark Mode
   ======================================== */
.page-title.option-2 {
	position: relative;
	background: #0f1419;
	padding: 154px 0px 108px 0px;
	overflow: hidden;
}

/* Background image support */
.page-title.option-2[style*="background-image"]::before {
	opacity: 0.15;
}

.page-title.option-2::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		linear-gradient(30deg, #1a1f29 12%, transparent 12.5%, transparent 87%, #1a1f29 87.5%, #1a1f29),
		linear-gradient(150deg, #1a1f29 12%, transparent 12.5%, transparent 87%, #1a1f29 87.5%, #1a1f29),
		linear-gradient(30deg, #1a1f29 12%, transparent 12.5%, transparent 87%, #1a1f29 87.5%, #1a1f29),
		linear-gradient(150deg, #1a1f29 12%, transparent 12.5%, transparent 87%, #1a1f29 87.5%, #1a1f29);
	background-size: 80px 140px;
	background-position: 0 0, 0 0, 40px 70px, 40px 70px;
	opacity: 0.3;
	z-index: 1;
}

.page-title.option-2::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(90deg, transparent 0%, rgba(59, 130, 246, 0.1) 100%);
	z-index: 1;
}

.page-title.option-2 .content-box {
	position: relative;
	z-index: 2;
}

.page-title.option-2 .content-box h1 {
	position: relative;
	display: block;
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-title.option-2 .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #94a3b8;
	padding-right: 13px;
	margin-right: 2px;
}

.page-title.option-2 .bread-crumb li a {
	color: #cbd5e1;
	transition: color 0.3s ease;
}

.page-title.option-2 .bread-crumb li a:hover {
	color: #3b82f6;
}


/* ========================================
   OPTION 2 LIGHT: African Tribal Circles Pattern
   ======================================== */
.page-title.option-2-light {
	position: relative;
	background: linear-gradient(135deg, #fef3e2 0%, #fdf4e3 50%, #fff5e6 100%);
	padding: 154px 0px 108px 0px;
	overflow: hidden;
}

/* Background image support */
.page-title.option-2-light[style*="background-image"] {
	background-blend-mode: soft-light;
	background-size: cover;
	background-position: center;
}

.page-title.option-2-light[style*="background-image"]::before {
	background: rgba(254, 243, 226, 0.88);
}

/* Tribal circle patterns - Main layer */
.page-title.option-2-light::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		radial-gradient(circle at center, transparent 30%, #d97706 30%, #d97706 32%, transparent 32%),
		radial-gradient(circle at center, transparent 50%, #ea580c 50%, #ea580c 52%, transparent 52%),
		radial-gradient(circle at center, transparent 70%, #c2410c 70%, #c2410c 71%, transparent 71%);
	background-size: 120px 120px, 120px 120px, 120px 120px;
	background-position: 0 0, 30px 30px, 60px 60px;
	opacity: 0.15;
	z-index: 1;
}

/* Tribal circle patterns - Accent layer */
.page-title.option-2-light::after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-image:
		radial-gradient(circle, #92400e 2px, transparent 2px),
		radial-gradient(circle, #c2410c 3px, transparent 3px),
		radial-gradient(circle, #ea580c 1.5px, transparent 1.5px);
	background-size: 80px 80px, 100px 100px, 60px 60px;
	background-position: 0 0, 40px 40px, 20px 20px;
	opacity: 0.2;
	z-index: 1;
	animation: tribalFloat 30s ease-in-out infinite;
}

@keyframes tribalFloat {

	0%,
	100% {
		transform: translateY(0) rotate(0deg);
	}

	50% {
		transform: translateY(-10px) rotate(2deg);
	}
}

.page-title.option-2-light .content-box {
	position: relative;
	z-index: 2;
}

/* Decorative accent circles around heading */
.page-title.option-2-light .content-box::before {
	content: '';
	position: absolute;
	left: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	border: 4px solid #ea580c;
	border-radius: 50%;
	opacity: 0.6;
	z-index: -1;
}

.page-title.option-2-light .content-box::after {
	content: '';
	position: absolute;
	left: -65px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: radial-gradient(circle, #c2410c 40%, transparent 40%, transparent 60%, #c2410c 60%, #c2410c 62%, transparent 62%);
	border-radius: 50%;
	z-index: -1;
}

.page-title.option-2-light .content-box h1 {
	position: relative;
	display: block;
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom: 10px;
	background: linear-gradient(135deg, #c2410c 0%, #ea580c 50%, #f97316 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Tribal dots accent under heading */
.page-title.option-2-light .content-box h1::after {
	content: '● ● ●';
	position: absolute;
	bottom: -25px;
	left: 0;
	font-size: 12px;
	letter-spacing: 8px;
	color: #ea580c;
	-webkit-text-fill-color: #ea580c;
	background: none;
}

.page-title.option-2-light .bread-crumb {
	position: relative;
	padding-left: 5px;
}

.page-title.option-2-light .bread-crumb::before {
	content: '';
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
	width: 8px;
	height: 8px;
	background: #ea580c;
	border-radius: 50%;
	box-shadow:
		0 0 0 3px rgba(234, 88, 12, 0.3),
		0 0 0 6px rgba(234, 88, 12, 0.15);
}

.page-title.option-2-light .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #92400e;
	padding-right: 13px;
	margin-right: 2px;
	font-weight: 500;
}

.page-title.option-2-light .bread-crumb li a {
	color: #78350f;
	font-weight: 500;
	transition: all 0.3s ease;
}

.page-title.option-2-light .bread-crumb li a:hover {
	color: #ea580c;
}

.page-title.option-2-light .bread-crumb li:before {
	content: '●';
	font-size: 8px;
	color: #ea580c;
	top: 5px;
}


/* ========================================
   OPTION 3: Minimalist with Texture Overlay
   ======================================== */
.page-title.option-3 {
	position: relative;
	background: #f8fafc;
	padding: 154px 0px 108px 0px;
	overflow: hidden;
}

.page-title.option-3::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image:
		repeating-linear-gradient(45deg, transparent, transparent 2px, rgba(0, 0, 0, 0.02) 2px, rgba(0, 0, 0, 0.02) 4px);
	opacity: 0.5;
}

.page-title.option-3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #f97316 0%, #dc2626 50%, #7c3aed 100%);
	box-shadow: 0 -2px 20px rgba(249, 115, 22, 0.3);
}

.page-title.option-3 .content-box h1 {
	position: relative;
	display: block;
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #0f172a;
	letter-spacing: -1px;
}

.page-title.option-3 .content-box h1::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 0;
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, #f97316 0%, #dc2626 100%);
	border-radius: 2px;
}

.page-title.option-3 .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #64748b;
	padding-right: 13px;
	margin-right: 2px;
}

.page-title.option-3 .bread-crumb li a {
	color: #475569;
	font-weight: 500;
	transition: color 0.3s ease;
}

.page-title.option-3 .bread-crumb li a:hover {
	color: #f97316;
}


/* ========================================
   OPTION 4: Bold Color Blocks
   ======================================== */
.page-title.option-4 {
	position: relative;
	background: #1e293b;
	padding: 154px 0px 108px 0px;
	overflow: hidden;
}

.page-title.option-4::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -10%;
	width: 600px;
	height: 600px;
	background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
	border-radius: 50%;
	opacity: 0.1;
	filter: blur(60px);
}

.page-title.option-4::after {
	content: '';
	position: absolute;
	bottom: -30%;
	left: -5%;
	width: 400px;
	height: 400px;
	background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
	border-radius: 50%;
	opacity: 0.1;
	filter: blur(60px);
}

.page-title.option-4 .content-box {
	position: relative;
	z-index: 2;
}

.page-title.option-4 .content-box h1 {
	position: relative;
	display: block;
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #ffffff;
	text-transform: uppercase;
	letter-spacing: -2px;
}

.page-title.option-4 .content-box h1::before {
	content: '';
	position: absolute;
	left: -60px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 6px;
	background: linear-gradient(90deg, #06b6d4 0%, #3b82f6 100%);
	border-radius: 3px;
}

.page-title.option-4 .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #94a3b8;
	padding-right: 13px;
	margin-right: 2px;
}

.page-title.option-4 .bread-crumb li a {
	color: #cbd5e1;
	transition: all 0.3s ease;
}

.page-title.option-4 .bread-crumb li a:hover {
	color: #06b6d4;
}


/* ========================================
   OPTION 5: Organic Gradient Flow
   ======================================== */
.page-title.option-5 {
	position: relative;
	background: linear-gradient(135deg, #fef3c7 0%, #fde68a 50%, #fbbf24 100%);
	padding: 154px 0px 108px 0px;
	overflow: hidden;
}

.page-title.option-5::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse at 10% 20%, rgba(251, 146, 60, 0.2) 0%, transparent 50%),
		radial-gradient(ellipse at 90% 80%, rgba(234, 88, 12, 0.15) 0%, transparent 50%);
	animation: organicFlow 20s ease-in-out infinite;
}

@keyframes organicFlow {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.05) rotate(5deg);
	}
}

.page-title.option-5::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.4;
}

.page-title.option-5 .content-box h1 {
	position: relative;
	display: block;
	font-size: 60px;
	line-height: 70px;
	font-weight: 700;
	margin-bottom: 10px;
	color: #78350f;
	z-index: 2;
}

.page-title.option-5 .bread-crumb li {
	position: relative;
	display: inline-block;
	font-size: 18px;
	color: #92400e;
	padding-right: 13px;
	margin-right: 2px;
	z-index: 2;
}

.page-title.option-5 .bread-crumb li a {
	color: #b45309;
	font-weight: 500;
	transition: all 0.3s ease;
}

.page-title.option-5 .bread-crumb li a:hover {
	color: #78350f;
	text-decoration: underline;
}


/* ========================================
   Common Styles for All Options
   ======================================== */
.page-title .bread-crumb li:last-child {
	padding: 0px;
	margin: 0px;
}

.page-title .bread-crumb li:before {
	position: absolute;
	content: '/';
	top: 0px;
	right: 0px;
}

.page-title .bread-crumb li:last-child:before {
	display: none;
}

.page-title .image-layer {
	position: absolute;
	right: 0px;
	bottom: 0px;
	z-index: 1;
}


/* ========================================
   RESPONSIVE DESIGN - ALL OPTIONS
   ======================================== */

/* Large Tablets & Small Desktops (992px - 1199px) */
@media only screen and (max-width: 1199px) {
	.page-title {
		padding: 130px 0px 90px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 130px;
		--pt-padding-bottom: 90px;
		--pt-title-size: 50px;
		--pt-title-line-height: 60px;
	}

	.page-title .content-box h1,
	.page-title.option-1 .content-box h1,
	.page-title.option-2 .content-box h1,
	.page-title.option-2-light .content-box h1,
	.page-title.option-3 .content-box h1,
	.page-title.option-4 .content-box h1,
	.page-title.option-5 .content-box h1 {
		font-size: 50px;
		line-height: 60px;
	}

	.page-title.option-2-light {
		padding: 130px 0px 100px 0px;
	}

	/* Background attachment adjustments for tablets */
	.page-title.option-1[style*="background-image"] {
		background-attachment: scroll;
	}
}

/* Tablets (768px - 991px) */
@media only screen and (max-width: 991px) {
	.page-title {
		padding: 110px 0px 80px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 110px;
		--pt-padding-bottom: 80px;
		--pt-title-size: 42px;
		--pt-title-line-height: 52px;
		--pt-breadcrumb-size: 16px;
		--pt-glass-padding: 30px 25px;
		--pt-glass-border-radius: 15px;
	}

	.page-title .content-box h1,
	.page-title.option-1 .content-box h1,
	.page-title.option-2 .content-box h1,
	.page-title.option-2-light .content-box h1,
	.page-title.option-3 .content-box h1,
	.page-title.option-4 .content-box h1,
	.page-title.option-5 .content-box h1 {
		font-size: 42px;
		line-height: 52px;
	}

	.page-title .bread-crumb li {
		font-size: 16px;
		padding-right: 11px;
	}

	/* Option 1 - Glassmorphism */
	.page-title.option-1 .content-box {
		padding: 30px 25px;
		border-radius: 15px;
	}

	/* Background image performance optimization */
	.page-title.option-1[style*="background-image"] {
		background-attachment: scroll;
		background-size: cover;
	}

	/* Option 2 Light - Tribal Circles */
	.page-title.option-2-light {
		padding: 110px 0px 90px 0px;
	}

	.page-title.option-2-light .content-box::before,
	.page-title.option-2-light .content-box::after {
		display: none;
	}

	/* Option 4 - Bold Color Blocks */
	.page-title.option-4 .content-box h1::before {
		display: none;
	}

	/* Reduce decorative blob sizes */
	.page-title.option-4::before {
		width: 400px;
		height: 400px;
	}

	.page-title.option-4::after {
		width: 300px;
		height: 300px;
	}
}

/* Mobile Landscape & Small Tablets (576px - 767px) */
@media only screen and (max-width: 767px) {
	.page-title {
		padding: 90px 0px 60px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 90px;
		--pt-padding-bottom: 60px;
		--pt-title-size: 32px;
		--pt-title-line-height: 42px;
		--pt-breadcrumb-size: 15px;
		--pt-glass-padding: 25px 20px;
		--pt-glass-border-radius: 12px;
		--pt-glass-blur: 8px;
	}

	.page-title .content-box h1,
	.page-title.option-1 .content-box h1,
	.page-title.option-2 .content-box h1,
	.page-title.option-2-light .content-box h1,
	.page-title.option-3 .content-box h1,
	.page-title.option-4 .content-box h1,
	.page-title.option-5 .content-box h1 {
		font-size: 32px;
		line-height: 42px;
		margin-bottom: 15px;
	}

	.page-title .bread-crumb li {
		font-size: 15px;
		padding-right: 10px;
	}

	/* Option 1 - Glassmorphism */
	.page-title.option-1 {
		padding: 90px 0px 60px 0px;
	}

	.page-title.option-1 .content-box {
		padding: 25px 20px;
		border-radius: 12px;
	}

	/* Enhanced background image handling for mobile */
	.page-title.option-1[style*="background-image"] {
		background-attachment: scroll;
		background-size: cover;
		background-position: center;
	}

	/* Optimize mesh animations for mobile performance */
	.page-title.option-1 {
		--pt-animation-duration: 20s;
	}

	.page-title.option-1::before {
		transform: scale(1.2); /* Slightly larger mesh for mobile */
	}

	/* Option 2 - Dark Geometric */
	.page-title.option-2::before {
		background-size: 60px 105px;
		background-position: 0 0, 0 0, 30px 52px, 30px 52px;
	}

	/* Option 2 Light - Tribal Circles */
	.page-title.option-2-light {
		padding: 90px 0px 70px 0px;
	}

	.page-title.option-2-light::before {
		background-size: 90px 90px, 90px 90px, 90px 90px;
		background-position: 0 0, 22px 22px, 45px 45px;
	}

	.page-title.option-2-light::after {
		background-size: 60px 60px, 75px 75px, 45px 45px;
		background-position: 0 0, 30px 30px, 15px 15px;
	}

	.page-title.option-2-light .content-box h1::after {
		font-size: 10px;
		letter-spacing: 6px;
		bottom: -20px;
	}

	.page-title.option-2-light .bread-crumb::before {
		width: 6px;
		height: 6px;
		left: -12px;
		box-shadow:
			0 0 0 2px rgba(234, 88, 12, 0.3),
			0 0 0 4px rgba(234, 88, 12, 0.15);
	}

	/* Option 3 - Minimalist */
	.page-title.option-3 .content-box h1::after {
		width: 50px;
		height: 3px;
		bottom: -12px;
	}

	/* Option 4 - Bold Color Blocks */
	.page-title.option-4::before,
	.page-title.option-4::after {
		display: none;
	}

	/* Option 5 - Organic Gradient */
	.page-title.option-5::after {
		opacity: 0.3;
	}

	/* Image layer */
	.page-title .image-layer {
		max-width: 50%;
		opacity: 0.5;
	}
}

/* Mobile Portrait (480px - 575px) */
@media only screen and (max-width: 575px) {
	.page-title {
		padding: 80px 0px 50px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 80px;
		--pt-padding-bottom: 50px;
		--pt-title-size: 28px;
		--pt-title-line-height: 38px;
		--pt-breadcrumb-size: 14px;
		--pt-glass-padding: 20px 18px;
		--pt-glass-blur: 6px;
	}

	.page-title .content-box h1,
	.page-title.option-1 .content-box h1,
	.page-title.option-2 .content-box h1,
	.page-title.option-2-light .content-box h1,
	.page-title.option-3 .content-box h1,
	.page-title.option-4 .content-box h1,
	.page-title.option-5 .content-box h1 {
		font-size: 28px;
		line-height: 38px;
	}

	.page-title .bread-crumb li {
		font-size: 14px;
	}

	.page-title.option-1 .content-box {
		padding: 20px 18px;
	}

	/* Further optimize background images for small mobile */
	.page-title.option-1[style*="background-image"] {
		background-size: cover;
		background-position: center top;
		--pt-bg-overlay-opacity: 0.8; /* Increase overlay for better text readability */
	}

	.page-title.option-2-light {
		padding: 80px 0px 60px 0px;
	}
}

/* Small Mobile (max 479px) */
@media only screen and (max-width: 479px) {
	.page-title {
		padding: 70px 0px 45px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 70px;
		--pt-padding-bottom: 45px;
		--pt-title-size: 24px;
		--pt-title-line-height: 34px;
		--pt-breadcrumb-size: 13px;
		--pt-glass-padding: 18px 15px;
		--pt-glass-border-radius: 10px;
		--pt-glass-blur: 5px;
		--pt-bg-overlay-opacity: 0.85; /* Higher overlay for text readability */
	}

	.page-title .content-box h1,
	.page-title.option-1 .content-box h1,
	.page-title.option-2 .content-box h1,
	.page-title.option-2-light .content-box h1,
	.page-title.option-3 .content-box h1,
	.page-title.option-4 .content-box h1,
	.page-title.option-5 .content-box h1 {
		font-size: 24px;
		line-height: 34px;
		letter-spacing: -0.5px;
	}

	.page-title .bread-crumb li {
		font-size: 13px;
		padding-right: 8px;
	}

	.page-title.option-1 .content-box {
		padding: 18px 15px;
		border-radius: 10px;
	}

	/* Performance optimizations for small screens */
	.page-title.option-1[style*="background-image"] {
		background-size: cover;
		background-position: center center;
	}

	/* Reduce mesh complexity on small screens */
	.page-title.option-1::before {
		--pt-mesh-color-2: transparent; /* Hide middle mesh layer for performance */
		transform: scale(1.5);
	}

	.page-title.option-2-light {
		padding: 70px 0px 55px 0px;
	}

	.page-title.option-2-light::before {
		background-size: 70px 70px, 70px 70px, 70px 70px;
		opacity: 0.12;
	}

	.page-title.option-2-light::after {
		background-size: 50px 50px, 60px 60px, 35px 35px;
		opacity: 0.15;
	}

	.page-title.option-2-light .content-box h1::after {
		font-size: 8px;
		letter-spacing: 5px;
		bottom: -18px;
	}

	.page-title.option-3 .content-box h1::after {
		width: 40px;
	}

	.page-title .image-layer {
		display: none;
	}
}

/* Landscape Orientation Adjustments */
@media only screen and (max-height: 500px) and (orientation: landscape) {
	.page-title {
		padding: 60px 0px 40px 0px;
	}

	.page-title.option-1 {
		--pt-padding-top: 60px;
		--pt-padding-bottom: 40px;
		--pt-title-size: 28px;
		--pt-title-line-height: 38px;
		--pt-glass-padding: 25px 20px;
	}

	.page-title.option-1,
	.page-title.option-2,
	.page-title.option-2-light,
	.page-title.option-3,
	.page-title.option-4,
	.page-title.option-5 {
		padding: 60px 0px 40px 0px;
	}

	.page-title .content-box h1 {
		font-size: 28px;
		line-height: 38px;
		margin-bottom: 10px;
	}

	/* Optimize background images for landscape mode */
	.page-title.option-1[style*="background-image"] {
		background-position: center center;
		background-size: cover;
	}

	/* Reduce animations in landscape for performance */
	.page-title.option-1 {
		--pt-animation-duration: 25s;
	}
}