/*
Theme Name: Alpha Fire Service
Theme URI: #
Template: hello-elementor
Author: Ceylon Exchange Mentoring (Pvt) Ltd
Author URI: https://cem.lk/
Description: A trusted provider of advanced fire protection systems and safety engineering solutions, dedicated to safeguarding lives, property, and progress through expert consultation, installation, and maintenance.
Tags: fire-protection, safety-engineering, consultation-services, installation-services, maintenance, corporate, professional, one-column, grid-layout, custom-colors, custom-logo, custom-menu, featured-images, responsive-layout, full-width-template, translation-ready
Version: 1.0.0.1764516674
Updated: 2025-11-30 15:31:14

*/

/*--------------------------------------------------------------
# Scroll Margin
--------------------------------------------------------------*/
:target {
	scroll-margin-top: 100px !important;
}

/*--------------------------------------------------------------
# Header Style
--------------------------------------------------------------*/
@media (min-width: 768px) {
	.cntc-btn-hdr {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Overlay Pseudo Elements
--------------------------------------------------------------*/
.overlay-before::before, .overlay-after::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/*--------------------------------------------------------------
# Breadcrumb Section
--------------------------------------------------------------*/
@media (min-width: 1367px) {
	.breadcrumb {
		min-height: 760px;
	}
}
@media (max-width: 1366px) and (min-width: 1025px) {
	.breadcrumb {
		min-height: 700px;
	}
}
@media (max-width: 1024px) {
	.breadcrumb {
		min-height: 560px;
	}
}
.breadcrumb::before {
	background: linear-gradient(270deg, transparent 1.18%, transparent 25.89%, rgba(0, 0, 0, 0.30) 50.59%, rgba(0, 0, 0, 0.75) 75.59%, var(--e-global-color-text) 100%);
}

/*--------------------------------------------------------------
# Grow Now - Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-primary) !important;
}
.elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-primary) 85%, black) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-primary) 85%, black) !important;
}
.elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-primary) 70%, black) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-primary) 70%, black) !important;
}
.elementor-button-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Grow Now Lite - Button
--------------------------------------------------------------*/
.custom-btn-grownow-lite .elementor-button {
	background-color: transparent !important;
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
	border-color: var(--e-global-color-primary) !important;
}
.custom-btn-grownow-lite .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-primary) 10%, transparent) !important;
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
	border-color: var(--e-global-color-primary) !important;
}
.custom-btn-grownow-lite .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-primary) 20%, transparent) !important;
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
	border-color: var(--e-global-color-primary) !important;
}

/*--------------------------------------------------------------
# Act Fast - Button
--------------------------------------------------------------*/
.custom-btn-actfast .elementor-button {
	background-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-secondary) !important;
}
.custom-btn-actfast .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, black) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, black) !important;
}
.custom-btn-actfast .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 70%, black) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-secondary) 70%, black) !important;
}

/*--------------------------------------------------------------
# Act Fast Lite - Button
--------------------------------------------------------------*/
.custom-btn-actfast-lite .elementor-button {
	background-color: transparent !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-secondary) !important;
}
.custom-btn-actfast-lite .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 10%, transparent) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-secondary) !important;
}
.custom-btn-actfast-lite .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 20%, transparent) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-secondary) !important;
}

/*--------------------------------------------------------------
# Clear Path - Button
--------------------------------------------------------------*/
.custom-btn-clearpath .elementor-button {
	background-color: var(--e-global-color-b53238e) !important;
	color: var(--e-global-color-85dc433) !important;
	fill: var(--e-global-color-85dc433) !important;
	border-color: var(--e-global-color-b53238e) !important;
}
.custom-btn-clearpath .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-b53238e) 85%, black) !important;
	color: var(--e-global-color-85dc433) !important;
	fill: var(--e-global-color-85dc433) !important;
	border-color: color-mix(in srgb, var(--e-global-color-b53238e) 85%, black) !important;
}
.custom-btn-clearpath .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-b53238e) 70%, black) !important;
	color: var(--e-global-color-85dc433) !important;
	fill: var(--e-global-color-85dc433) !important;
	border-color: color-mix(in srgb, var(--e-global-color-b53238e) 70%, black) !important;
}

/*--------------------------------------------------------------
# Clear Path Lite - Button
--------------------------------------------------------------*/
.custom-btn-clearpath-lite .elementor-button {
	background-color: transparent !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-b53238e) !important;
}
.custom-btn-clearpath-lite .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-b53238e) 15%, transparent) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-b53238e) !important;
}
.custom-btn-clearpath-lite .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-b53238e) 25%, transparent) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-b53238e) !important;
}

/*--------------------------------------------------------------
# Trust Edge - Button
--------------------------------------------------------------*/
.custom-btn-trustedge .elementor-button {
	background-color: var(--e-global-color-text) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: var(--e-global-color-text) !important;
}
.custom-btn-trustedge .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-text) 85%, white) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-text) 85%, white) !important;
}
.custom-btn-trustedge .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-text) 70%, white) !important;
	color: var(--e-global-color-b53238e) !important;
	fill: var(--e-global-color-b53238e) !important;
	border-color: color-mix(in srgb, var(--e-global-color-text) 70%, white) !important;
}

/*--------------------------------------------------------------
# Trust Edge Lite - Button
--------------------------------------------------------------*/
.custom-btn-trustedge-lite .elementor-button {
	background-color: transparent !important;
	color: var(--e-global-color-text) !important;
	fill: var(--e-global-color-text) !important;
	border-color: var(--e-global-color-text) !important;
}
.custom-btn-trustedge-lite .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-text) 10%, transparent) !important;
	color: var(--e-global-color-text) !important;
	fill: var(--e-global-color-text) !important;
	border-color: var(--e-global-color-text) !important;
}
.custom-btn-trustedge-lite .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-text) 20%, transparent) !important;
	color: var(--e-global-color-text) !important;
	fill: var(--e-global-color-text) !important;
	border-color: var(--e-global-color-text) !important;
}

/*--------------------------------------------------------------
# Gradient Effect
--------------------------------------------------------------*/
.gradient-fx {
	background: linear-gradient(90deg, var(--e-global-color-11e8390) 0%, var(--e-global-color-3b3ccbe) 50%, var(--e-global-color-primary) 100%);
}
@media (max-width: 1024px) {
	.gradient-fx {
		background: linear-gradient(0deg, var(--e-global-color-11e8390) 0%, var(--e-global-color-3b3ccbe) 50%, var(--e-global-color-primary) 100%);
	}
}

/*--------------------------------------------------------------
# Split Section
--------------------------------------------------------------*/
.split-section {
	overflow: hidden;
	border-radius: 16px;
	background-color: var(--e-global-color-primary);
	
}
.split-section::before {
	z-index: 1;
	border-radius: 16px;
	border: 6px solid rgba(255, 255, 255, 0.20);
}
.split-section .content {
	padding: 80px 32px;
}
.split-section .image {
	min-height: 350px;
}
.split-section .image::before {
	background: linear-gradient(90deg, var(--e-global-color-primary) 0%, transparent 5%);
}
@media (max-width: 1366px) and (min-width: 1025px) {
	.split-section .content {
		padding: 60px 24px;
	}
}
@media (max-width: 1024px) and (min-width: 768px) {
	.split-section .content {
		order: 2;
		padding: 40px 20px;
	}
	.split-section .image {
		order: 1;
	}
	.split-section .image::before {
		background: linear-gradient(0deg, var(--e-global-color-primary) 0%, transparent 5%);
	}
}
@media (max-width: 767px) {
	.split-section .content {
		order: 2;
		padding: 20px;
	}
	.split-section .image {
		order: 1;
		min-height: 250px;
	}
	.split-section .image::before {
		background: linear-gradient(0deg, var(--e-global-color-primary) 0%, transparent 5%);
	}
}

/*--------------------------------------------------------------
# Fire Product Item
--------------------------------------------------------------*/
.fire-product {
	display: flex;
	padding: 16px 16px 24px 16px;
	flex-direction: column;
	justify-content: space-between;
	align-items: start;
	border-radius: 8px;
	border: 1px solid var(--e-global-color-accent);
	gap: 16px;
	background: var(--e-global-color-accent);
	transition: border 0.3s ease;
}
.fire-product:hover {
	border: 1px solid var(--e-global-color-primary);
}
.fire-product .image {
	aspect-ratio: 5 / 4;
	background-color: var(--e-global-color-b53238e);
	background-position: center center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}
.fire-product .content-upper {
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 8px;
}
.fire-product p {
	margin: 0;
}
.fire-product .elementor-button {
	padding: 4px 12px !important;
	border-width: 1px !important;
}
.fire-product .elementor-button:hover {
	padding: 4px 12px !important;
	border-width: 1px !important;
}
.fire-product .elementor-button:active {
	padding: 4px 12px !important;
	border-width: 1px !important;
}

/*--------------------------------------------------------------
# Why Card
--------------------------------------------------------------*/
.why-card {
	display: flex;
	padding: 16px;
	flex-direction: column;
	justify-content: start;
	align-items: center;
	border-radius: 8px;
	gap: 8px;
	background: var(--e-global-color-accent);
	border: 1px solid var(--e-global-color-accent);
	transition: border 0.3s ease;
}
.why-card:hover {
	border: 1px solid var(--e-global-color-primary);
}
.why-card .image {
	aspect-ratio: 38 / 27;
	background-position: center center;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-size: cover;
}
.why-card h4 {
	text-align: center;
}
.why-card p {
	margin: 0;
	color: var(--e-global-color-ff57577);
	text-align: center;
}

/*--------------------------------------------------------------
# Service Box
--------------------------------------------------------------*/
.service-box {
	display: flex;
	padding: 24px 24px 40px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.10);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(6px);
}
.service-box .elementor-icon {
	display: flex;
	width: 34px;
}
.service-box h4 {
	width: 100%;
	color: var(--e-global-color-b53238e) !important;
	text-transform: uppercase !important;
	margin-bottom: 16px;
}
.service-box p {
	width: 100%;
	color: var(--e-global-color-b53238e);
	margin-bottom: 0;
	font-weight: 500;
}

/*--------------------------------------------------------------
# Post Archive
--------------------------------------------------------------*/
.loading-posts {
	text-align: center;
	padding: 20px;
	font-style: italic;
	color: #666;
}
.tag-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 20px;
	justify-content: center;
}
/*
.tag-filter {

}
.tag-filter:hover {

}
*/
.tag-filter.active {
	background-color: var(--e-global-color-e466b8e) !important;
	color: var(--e-global-color-2e22a0c) !important;
	fill: var(--e-global-color-2e22a0c) !important;
	border-color: var(--e-global-color-e466b8e) !important;
}

.custom-archive-posts {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

/* Individual Post Item */
.archive-post-item {
	overflow: hidden;
	width: calc(33.33% - 16px);
	border-radius: 16px;
	background-color: var(--e-global-color-accent);
}

.post-inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.post-thumbnail-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
}
.post-thumbnail-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	transition: transform 0.5s ease;
}
.post-thumbnail-link:hover .post-thumbnail-background {
	transform: scale(1.08);
}

.post-thumbnail-link {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -9999px;
}

.archive-post-item:hover .post-thumbnail img {
	transform: scale(1.03);
}

.post-content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding: 16px 16px 24px 16px;
}

.post-title {
	margin-bottom: 10px;
}

.post-title a {
	color: var( --e-global-color-57cd6c4 ) !important;
	text-decoration: none;
	transition: color 0.2s;
}

.post-title:hover a {
	color: var( --e-global-color-text ) !important;
}

.post-title a:hover {
	color: #0073aa;
}

.post-meta {
	display: none;
	color: var(--e-global-color-ff57577);
	font-size: 0.9rem;
	margin-bottom: 8px;
	/*display: flex;
	flex-wrap: wrap;*/
	gap: 15px;
}

.post-meta a {
	display: none;
	color: #555;
	text-decoration: none;
	transition: color 0.2s;
}

.post-meta a:hover {
	color: #d54e21;
	text-decoration: underline;
}

.post-excerpt {
	display: none;
	margin-bottom: 8px;
}

.post-inner .read-more {
	display: flex;
	gap: 8px;
	color: var(--e-global-color-primary) !important;
	align-items: center;
	font-weight: 500;
	transition: gap 0.3s ease;
}
.post-inner:hover .read-more {
	color: var(--e-global-color-primary) !important;
	gap: 12px;
}

.post-footer a {
	color: var(--e-global-color-c71c7f0) !important;
}
.post-footer:hover a {
	color: var(--e-global-color-c71c7f0) !important;
}

/* Pagination */
.pagination {
	margin-top: 3rem;
	text-align: center;
}

/* Tablet: 1024px to 768px */
@media (max-width: 1024px) and (min-width: 768px) {
	.archive-post-item {
		width: calc(50% - 12px);
	}
}

/* Mobile: 767px and below */
@media (max-width: 767px) {
	.archive-post-item {
		width: 100%;
	}
	.post-inner {
		flex-direction: column;
	}
	
	.post-thumbnail {
		flex: 0 0 100%;
		width: 100%;
	}
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer .elementor-icon-list-items {
	row-gap: 12px;
}
.footer .elementor-icon-list-items li {
	width: calc(50% - 12px);
}
@media (max-width: 1024px) {
	.footer .elementor-icon-list-items li {
		width: 100%;
	}
}