/* Local Font Declarations for ASPX */
@font-face {
	font-family: 'Microgramma';
	src: url('https://abrajenergy.com/abraj-kc/fonts/Microgramma D Bold Extended.otf') format('opentype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'FormaDJRMicro';
	src: url('https://abrajenergy.com/abraj-kc/fonts/FormaDJRMicro.otf') format('opentype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'FormaDJRMicro';
	src: url('https://abrajenergy.com/abraj-kc/fonts/FormaDJRMicro Medium.otf') format('opentype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

/* Custom Banner Override Styles */
/* Override banner background and text alignment for detail pages */
.detail-hero {
	background: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0)), url('https://abrajenergy.com/abraj-kc/PublishingImages/banners_kc.jpg') !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	text-align: left !important;
	justify-content: flex-start !important;
	display: flex !important;
	align-items: center !important;
	padding: 8rem 0 5rem 0 !important;
	min-height: 700px !important;
}

/* Align container with logo left edge */
.detail-hero .container {
	display: flex !important;
	justify-content: flex-start !important;
	align-items: center !important;
	width: 100% !important;
	max-width: 1300px !important;
	margin: 9rem auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/* Hero content aligned with logo left edge */
.detail-hero .hero-content {
	text-align: left !important;
	max-width: 900px !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	padding-left: 5rem !important;
	padding-right: 0 !important;
	padding-top:9rem;
}

/* Main title - single line, aligned with logo */
.detail-hero h1 {
	text-align: left !important;
	max-width: 900px !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	white-space: nowrap !important;
	font-size: 3.8rem !important;
	font-weight: 600 !important;
	line-height: 1.1 !important;
	margin-bottom: 1.5rem !important;
}

/* Description paragraph - aligned with logo */
.detail-hero p {
	text-align: left !important;
	max-width: 900px !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	font-size: 1.3rem !important;
	line-height: 1.4 !important;
	margin-bottom: 0 !important;
}

/* Ensure proper spacing and alignment */
@media (max-width: 768px) {
	.detail-hero h1 {
		font-size: 2.5rem !important;
		white-space: normal !important;
	}
	.detail-hero p {
		font-size: 1.1rem !important;
	}
}

/* Comprehensive Responsive Design Styles */
/* Tablet Responsive Design (768px - 1080px) */
@media (max-width: 1080px) and (min-width: 769px) {
	/* Container adjustments */
	.container {
		padding: 0 2rem !important;
	}
	
	/* Hero section adjustments */
	.detail-hero {
		padding: 6rem 0 4rem 0 !important;
		min-height: 500px !important;
	}
	
	.detail-hero .container {
		margin: 6rem auto !important;
	}
	
	.detail-hero h1 {
		font-size: 3rem !important;
	}
	
	.detail-hero p {
		font-size: 1.2rem !important;
	}
	
	/* White paper header layout - stacked for tablet */
	.white-paper-header {
		display: flex !important;
		flex-direction: column !important;
		gap: 2rem !important;
		margin-bottom: 3rem !important;
		text-align: center !important;
	}
	
	.paper-cover {
		align-self: center !important;
		max-width: 350px !important;
		margin: 0 auto !important;
	}
	
	.paper-cover img {
		width: 100% !important;
		height: auto !important;
		border-radius: 8px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
	}
	
	.paper-info {
		text-align: center !important;
		width: 100% !important;
	}
	
	.paper-info h1 {
		font-size: 2.2rem !important;
		line-height: 1.3 !important;
		text-align: center !important;
		margin-bottom: 1.5rem !important;
	}
	
	/* Paper meta information for tablet */
	.paper-meta {
		display: flex !important;
		flex-direction: row !important;
		gap: 1.5rem !important;
		margin-bottom: 2rem !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
	}
	
	.meta-item {
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
		font-size: 1rem !important;
	}
	
	/* Executive summary - full width below image and info */
	.executive-summary-preview {
		width: 100% !important;
		margin-top: 2rem !important;
		text-align: left !important;
		padding: 0 !important;
	}
	
	.executive-summary-preview h3 {
		font-size: 1.4rem !important;
		margin-bottom: 1.5rem !important;
		text-align: center !important;
		color: var(--primary-blue) !important;
	}
	
	.executive-summary-preview p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		margin-bottom: 1.2rem !important;
		text-align: left !important;
		color: var(--dark-gray) !important;
	}
	
	/* CTA buttons */
	.cta-buttons {
		display: flex !important;
		flex-direction: row !important;
		gap: 1rem !important;
		justify-content: center !important;
		margin-top: 2rem !important;
	}
	
	.btn {
		flex: 1 !important;
		max-width: 250px !important;
		text-align: center !important;
		padding: 1rem 1.5rem !important;
	}
}

/* Mobile Responsive Design (320px - 768px) */
@media (max-width: 768px) {
	/* Global mobile adjustments */
	body {
		font-size: 14px !important;
	}
	
	/* Container adjustments */
	.container {
		padding: 0 1rem !important;
		max-width: 100% !important;
	}
	
	/* Header adjustments */
	#header {
		padding: 0.5rem 0 !important;
	}
	
	.header-logo img {
		width: 120px !important;
	}
	
	/* Hero section mobile */
	.detail-hero {
		padding: 4rem 0 3rem 0 !important;
		min-height: 400px !important;
		text-align: center !important;
	}
	
	.detail-hero .container {
		margin: 4rem auto !important;
	}
	
	.detail-hero .hero-content {
		max-width: 100% !important;
		text-align: center !important;
	}
	
	.detail-hero h1 {
		font-size: 2rem !important;
		margin-bottom: 1rem !important;
		text-align: center !important;
	}
	
	.detail-hero p {
		font-size: 1rem !important;
		text-align: center !important;
		line-height: 1.5 !important;
	}
	
	/* Content overlap section */
	.content-overlap {
		margin-top: -2rem !important;
		padding: 2rem 0 !important;
	}
	
	/* Breadcrumb navigation */
	.breadcrumb-nav {
		padding: 1rem 0 !important;
		margin-bottom: 1rem !important;
	}
	
	.breadcrumb {
		font-size: 0.85rem !important;
		flex-wrap: wrap !important;
	}
	
	.breadcrumb-item {
		margin-bottom: 0.5rem !important;
	}
	
	/* White paper header mobile layout */
	.white-paper-header {
		display: flex !important;
		flex-direction: column !important;
		gap: 1.5rem !important;
		margin-bottom: 2rem !important;
		text-align: center !important;
	}
	
	.paper-cover {
		align-self: center !important;
		max-width: 250px !important;
		margin: 0 auto !important;
	}
	
	.paper-cover img {
		width: 100% !important;
		height: auto !important;
		border-radius: 8px !important;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
	}
	
	.paper-info {
		text-align: center !important;
	}
	
	.paper-type {
		font-size: 0.8rem !important;
		margin-bottom: 1rem !important;
	}
	
	.paper-info h1 {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
		margin-bottom: 1.5rem !important;
		text-align: center !important;
	}
	
	/* Paper meta information */
	.paper-meta {
		display: flex !important;
		flex-direction: column !important;
		gap: 0.75rem !important;
		margin-bottom: 1.5rem !important;
		align-items: center !important;
	}
	
	.meta-item {
		display: flex !important;
		align-items: center !important;
		gap: 0.5rem !important;
		font-size: 0.9rem !important;
		justify-content: center !important;
	}
	
	.meta-item i {
		font-size: 0.8rem !important;
	}
	
	/* Executive summary */
	.executive-summary-preview {
		margin-top: 1.5rem !important;
		text-align: left !important;
	}
	
	.executive-summary-preview h3 {
		font-size: 1.2rem !important;
		margin-bottom: 1rem !important;
		text-align: center !important;
	}
	
	.executive-summary-preview p {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
		margin-bottom: 1rem !important;
		text-align: left !important;
	}
	
	/* CTA section mobile */
	.paper-cta {
		background: #004d5a !important;
		padding: 2rem 1rem !important;
		border-radius: 12px !important;
		margin: 2rem 0 !important;
		text-align: center !important;
	}
	
	.paper-cta h2 {
		font-size: 1.4rem !important;
		margin-bottom: 1rem !important;
		color: #ffffff !important;
	}
	
	.paper-cta p {
		font-size: 0.95rem !important;
		margin-bottom: 1.5rem !important;
		color: #ffffff !important;
	}
	
	/* CTA buttons mobile */
	.cta-buttons {
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: center !important;
	}
	
	.btn {
		width: 100% !important;
		max-width: 280px !important;
		text-align: center !important;
		padding: 1rem 1.5rem !important;
		font-size: 0.9rem !important;
		border-radius: 25px !important;
		transition: all 0.3s ease !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		gap: 0.5rem !important;
	}
	
	.btn i {
		font-size: 0.9rem !important;
	}
	
	.btn-primary {
		background: var(--primary-blue) !important;
		color: white !important;
		border: 2px solid var(--primary-blue) !important;
	}
	
	.btn-primary:hover {
		background: var(--dark-blue) !important;
		transform: translateY(-2px) !important;
	}
	
	.btn-secondary {
		background: transparent !important;
		color: var(--primary-blue) !important;
		border: 2px solid var(--primary-blue) !important;
	}
	
	.btn-secondary:hover {
		background: var(--primary-blue) !important;
		color: white !important;
		transform: translateY(-2px) !important;
	}
	
	/* Modal adjustments for mobile */
	.modal-content {
		width: 95% !important;
		max-width: 400px !important;
		margin: 5% auto !important;
		padding: 1.5rem !important;
	}
	
	.modal h2 {
		font-size: 1.3rem !important;
		margin-bottom: 1rem !important;
	}
	
	.form-group {
		margin-bottom: 1rem !important;
	}
	
	.form-group label {
		font-size: 0.9rem !important;
		margin-bottom: 0.5rem !important;
	}
	
	.form-group input,
	.form-group select,
	.form-group textarea {
		padding: 0.75rem !important;
		font-size: 0.9rem !important;
		border-radius: 6px !important;
	}
	
	.submit-btn {
		width: 100% !important;
		padding: 1rem !important;
		font-size: 0.9rem !important;
		border-radius: 25px !important;
	}
	
	/* Footer mobile adjustments */
	.footer-content {
		grid-template-columns: 1fr !important;
		gap: 2rem !important;
		text-align: center !important;
	}
	
	.footer-section.company-info {
		padding-right: 0 !important;
	}
	
	.social-media {
		justify-content: center !important;
	}
	
	.footer-section h4 {
		font-size: 0.9rem !important;
	}
	
	.footer-section ul li a {
		font-size: 0.85rem !important;
	}
}

/* Medium Mobile Devices (428px and similar) - Fix for banner title cutting */
@media (max-width: 480px) and (min-width: 375px) {
	/* Targeted fix for devices like iPhone 14 Pro Max (428px) */
	.container {
		padding: 0 1rem !important;
	}
	
	/* Hero section specific adjustments */
	.detail-hero {
		padding: 4.5rem 0 3.5rem 0 !important;
		min-height: 480px !important;
	}
	
	.detail-hero .container {
		margin: 4.5rem auto !important;
		padding: 0 1rem !important;
	}
	
	.detail-hero h1 {
		font-size: 1.6rem !important;
		line-height: 1.2 !important;
		margin-bottom: 0.8rem !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: auto !important;
	}
	
	.detail-hero p {
		font-size: 0.9rem !important;
		line-height: 1.4 !important;
	}
}

/* Small Mobile Devices (320px - 374px) */
@media (max-width: 374px) {
	/* Extra small mobile adjustments */
	.container {
		padding: 0 0.75rem !important;
	}
	
	.detail-hero {
		padding: 3.5rem 0 2.5rem 0 !important;
		min-height: 400px !important;
	}
	
	.detail-hero h1 {
		font-size: 1.4rem !important;
		line-height: 1.3 !important;
	}
	
	.detail-hero p {
		font-size: 0.85rem !important;
	}
	
	.paper-info h1 {
		font-size: 1.3rem !important;
	}
	
	.paper-cover {
		max-width: 200px !important;
	}
	
	.btn {
		padding: 0.9rem 1.2rem !important;
		font-size: 0.85rem !important;
	}
	
	.executive-summary-preview p {
		font-size: 0.9rem !important;
	}
	
	.paper-cta {
		padding: 1.5rem 0.75rem !important;
	}
}

/* Mobile Menu Functionality Styles */
/* Mobile Navigation Functionality */
@media (max-width: 1079px) {
	/* Complete reset for mobile navigation to eliminate any gaps */
	.header-nav * {
		box-sizing: border-box !important;
	}
	
	.header-nav ul,
	.header-nav ul li,
	.header-nav ul li a {
		margin: 0 !important;
		padding: 0 !important;
		border: none !important;
		outline: none !important;
		vertical-align: baseline !important;
		background: transparent !important;
		font-size: inherit !important;
		font-family: inherit !important;
		font-weight: inherit !important;
		color: inherit !important;
		text-decoration: none !important;
	}
	
	.mobile-nav-toggle {
		display: flex !important;
		visibility: visible !important;
		opacity: 1 !important;
		width: 30px !important;
		height: 30px !important;
		background: transparent !important;
		flex-direction: column !important;
		cursor: pointer !important;
		padding: 0.5rem !important;
		z-index: 1002 !important;
		justify-content: space-around !important;
		align-items: center !important;
		border: none !important;
		position: relative !important;
	}
	
	.mobile-nav-toggle span {
		width: 25px !important;
		height: 3px !important;
		background: #333333 !important;
		margin: 3px 0 !important;
		transition: 0.3s !important;
		display: block !important;
		border-radius: 2px !important;
		opacity: 1 !important;
		min-height: 3px !important;
		min-width: 25px !important;
	}
	
	.mobile-nav-toggle.active span:nth-child(1) {
		transform: rotate(-45deg) translate(-5px, 6px) !important;
	}
	
	.mobile-nav-toggle.active span:nth-child(2) {
		opacity: 0 !important;
	}
	
	.mobile-nav-toggle.active span:nth-child(3) {
		transform: rotate(45deg) translate(-5px, -6px) !important;
	}
	
	/* Ensure mobile menu is properly displayed when active */
	.header-nav ul {
		display: none !important;
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		width: 100% !important;
		background: var(--white) !important;
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
		border-radius: 8px !important;
		overflow: hidden !important;
		flex-direction: column !important;
		z-index: 1000 !important;
		border: 1px solid var(--light-gray) !important;
		margin: 0 !important;
		padding: 0 !important;
		line-height: 1 !important;
		font-size: 0 !important;
	}
	
	.header-nav ul.active {
		display: flex !important;
	}
	
	.header-nav ul li {
		width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
		line-height: 1 !important;
		font-size: 1rem !important;
		vertical-align: top !important;
		border: none !important;
		outline: none !important;
	}
	
	.header-nav ul li a {
		display: flex !important;
		padding: 1.2rem 1.5rem !important;
		border-bottom: 1px solid var(--light-gray) !important;
		color: var(--primary-darkgray) !important;
		background: var(--white) !important;
		transition: all 0.3s ease !important;
		min-height: 44px !important;
		align-items: center !important;
		text-decoration: none !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		line-height: 1.4 !important;
		font-size: 1rem !important;
		vertical-align: top !important;
		border-top: none !important;
	}
	
	.header-nav ul li a:hover {
		background-color: var(--light-gray) !important;
		color: var(--primary-blue) !important;
	}
	
	.header-nav ul li:last-child a {
		border-bottom: none !important;
	}
	
	/* Mobile dropdown styles */
	.header-nav .dynamic {
		position: static !important;
		display: none !important;
		background: var(--light-gray) !important;
		box-shadow: none !important;
		border: none !important;
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
	}
	
	.dynamic-children.active .dynamic {
		display: block !important;
	}
	
	.header-nav .dynamic li a {
		padding-left: 2.5rem !important;
		background: var(--light-gray) !important;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
		font-size: 0.95rem !important;
	}
	
	.header-nav .dynamic li a:hover {
		background: rgba(1, 158, 189, 0.1) !important;
		color: var(--primary-blue) !important;
	}
}

/* Hide mobile toggle on desktop */
@media (min-width: 1080px) {
	.mobile-nav-toggle {
		display: none !important;
	}
}