/*
Theme Name: Icon Engineering Enterprises
Theme URI: https://www.iconcmb.com
Template: hello-elementor
Author: Ceylon Exchange Mentoring
Author URI: https://cem.lk/
Description: Icon Engineering Enterprises is a modern and professional theme crafted for HVAC, MEP, and infrastructure companies. It showcases innovative solutions, large-scale projects, certified equipment, corporate values, and industry insights with a clean and responsive design. Built to enhance credibility and engagement, the theme provides a seamless browsing experience across devices while reflecting the precision and performance of engineering excellence.
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, block-patterns, block-styles, editor-style, grid-layout, one-column, two-columns, right-sidebar, footer-widgets, wide-blocks, responsive-layout, theme-options
Version: 1.0.0
Updated: 2025-10-01 00:00:00

*/

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

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

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.icon-eng-header .header-inner {
	padding: 16px 32px;
	border-radius: 4px;
	background: var(--e-global-color-15df81f);
	box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.08);
}
@media (max-width: 767px) {
	.hdr-contact-btn {
		display: none;
	}
	.icon-eng-header .header-inner {
		padding: 8px 16px;
	}
}
@media (min-width: 768px) {
	.hdr-contact-nav {
		display: none !important;	
	}
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero-section {
	z-index: 1;
	position: relative;
	background: linear-gradient(63deg, var(--e-global-color-secondary) 4.08%, var(--e-global-color-primary) 98.05%);
}
.hero-section::before {
	z-index: 1;
	background-image: url("/wp-content/uploads/2025/10/pixel-bw-waves.webp");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
}

/*--------------------------------------------------------------
# Hero Section Sub Pages
--------------------------------------------------------------*/
.hero-alt::before {
	background: linear-gradient(180deg, transparent 0%, var(--e-global-color-239a338) 100%);
}

/*--------------------------------------------------------------
# Blueprint - Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-c71c7f0) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 30%, transparent) !important;
	margin: 4px !important;
}
.elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-c71c7f0) 85%, black) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 45%, transparent) !important;
}
.elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-c71c7f0) 70%, black) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 60%, transparent) !important;
}
.elementor-button-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Blueprint Lite - Button
--------------------------------------------------------------*/
.custom-btn-blueprint-lite .elementor-button {
	background-color: color-mix(in srgb, var(--e-global-color-c71c7f0) 30%, transparent) !important;
	color: var(--e-global-color-c71c7f0) !important;
	fill: var(--e-global-color-c71c7f0) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 30%, transparent) !important;
}
.custom-btn-blueprint-lite .elementor-button:hover {
	background-color:color-mix(in srgb, var(--e-global-color-c71c7f0) 45%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 45%, transparent) !important;
}
.custom-btn-blueprint-lite .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-c71c7f0) 60%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb, var(--e-global-color-c71c7f0) 60%, transparent) !important;
}

/*--------------------------------------------------------------
# Pulse - Button
--------------------------------------------------------------*/
.custom-btn-pulse .elementor-button {
	background-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 30%, transparent) !important;
}
.custom-btn-pulse .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, black) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 45%, transparent) !important;
}
.custom-btn-pulse .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 70%, black) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 60%, transparent) !important;
}

/*--------------------------------------------------------------
# Pulse Lite - Button
--------------------------------------------------------------*/
.custom-btn-pulse-lite .elementor-button {
	background-color: color-mix(in srgb,var(--e-global-color-secondary) 30%, transparent) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 30%, transparent) !important;
}
.custom-btn-pulse-lite .elementor-button:hover {
	background-color: color-mix(in srgb,var(--e-global-color-secondary) 45%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 45%, transparent) !important;
}
.custom-btn-pulse-lite .elementor-button:active {
	background-color: color-mix(in srgb,var(--e-global-color-secondary) 60%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-secondary) 60%, transparent) !important;
}

/*--------------------------------------------------------------
# Core - Button
--------------------------------------------------------------*/
.custom-btn-core .elementor-button {
	background-color: var(--e-global-color-15df81f) !important;
	color: var(--e-global-color-239a338) !important;
	fill: var(--e-global-color-239a338) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 30%, transparent) !important;
}
.custom-btn-core .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-15df81f) 90%, black) !important;
	color: var(--e-global-color-239a338) !important;
	fill: var(--e-global-color-239a338) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 45%, transparent) !important;
}
.custom-btn-core .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-15df81f) 80%, black) !important;
	color: var(--e-global-color-239a338) !important;
	fill: var(--e-global-color-239a338) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 60%, transparent) !important;
}

/*--------------------------------------------------------------
# Core Lite - Button
--------------------------------------------------------------*/
.custom-btn-core-lite .elementor-button {
	background-color: color-mix(in srgb,var(--e-global-color-15df81f) 30%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 30%, transparent) !important;
}
.custom-btn-core-lite .elementor-button:hover {
	background-color: color-mix(in srgb,var(--e-global-color-15df81f) 45%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 45%, transparent) !important;
}
.custom-btn-core-lite .elementor-button:active {
	background-color: color-mix(in srgb,var(--e-global-color-15df81f) 60%, transparent) !important;
	color: var(--e-global-color-15df81f) !important;
	fill: var(--e-global-color-15df81f) !important;
	box-shadow: 0px 0px 0px 4px color-mix(in srgb,var(--e-global-color-15df81f) 60%, transparent) !important;
}

/*--------------------------------------------------------------
# Split Section
--------------------------------------------------------------*/
.split-section::before {
	z-index: 2;
	border-radius: 16px;
	border: 5px solid rgba(255, 255, 255, 0.2);
}
.split-section {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	flex-direction: row !important;
	overflow: hidden;
	border-radius: 16px;
	min-height: 450px;
}
.split-section .content {
	width: 50%;
	padding: 20px 0px 20px 40px;
	background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, var(--e-global-color-3315106) 95%);
}
.split-section .image {
	width: 50%;
}
.split-section .image::before {
	z-index: 1;
	background: linear-gradient(270deg, transparent 20%, var(--e-global-color-3315106) 100%);
}
@media (max-width: 1024px) {
	.split-section {
		flex-direction: column !important;
	}
	.split-section .image {
		order: 2;
		width: 100%;
		aspect-ratio: 16 / 9;
	}
	.split-section .image::before {
		background: linear-gradient(0deg, transparent 20%, var(--e-global-color-3315106) 100%);
	}
	.split-section .content {
		order: 1;
		width: 100%;
		padding: 32px 40px;
		background: linear-gradient(180deg, var(--e-global-color-secondary) 0%, var(--e-global-color-3315106) 95%);
	}
}
@media (max-width: 767px) {
	.split-section .content {
		order: 1;
		width: 100%;
		padding: 16px 16px;
		background: linear-gradient(180deg, var(--e-global-color-secondary) 0%, var(--e-global-color-3315106) 95%);
	}
	.split-section .image {
		aspect-ratio: 4 / 3;
	}
}

/*--------------------------------------------------------------
# Solutions Section
--------------------------------------------------------------*/
.solutions .swiper-slide-inner {
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}
.what-do {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	flex-direction: column;
	padding: 24px 24px 40px 24px;
	background: rgba(255, 255, 255, 0.10);
	backdrop-filter: blur(10px);
}
.what-do h6, .what-do p {
	text-align: left;
	font-style: normal;
	margin: 0;
	color: var(--e-global-color-15df81f);
}

/*--------------------------------------------------------------
# Engagement Stages
--------------------------------------------------------------*/
.eng-stages .swiper-slide-image {
	display: none;
}
.stages {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 16px;
	border-radius: 4px;
	padding: 32px;
	background: rgba(0, 0, 0, 0.20);
	backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.stages .count {
	display: flex;
	line-height: 1;
	border-radius: 42px;
	width: 42px;
	aspect-ratio: 1 / 1;
	color: var(--e-global-color-15df81f);
	justify-content: center;
	margin: 0;
	text-align: left;
	font-style: normal;
	padding: 12px;
	background-color: rgba(0, 0, 0, 0.2)
}
.stages h5 {
	color: var(--e-global-color-15df81f);
	margin: 0;
	text-align: left;
}

/*--------------------------------------------------------------
# Core Engineering
--------------------------------------------------------------*/
.core-eng-solutions .swiper-slide {
	margin: 0px 0px 64px 0px;
}
@media (max-width: 767px) {
	.swiper-slide {
		margin: 0px 0px 48px 0px;
	}
}
.core-eng-solutions .core-eng {
	position: absolute;
	bottom: 0;
	display: flex;
	width: 100%;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 0px;
	align-self: stretch;
	border-radius: 24px 24px 8px 8px;
	border: 1px solid rgba(0, 0, 0, 0.50);
	background: var(--e-global-color-15df81f);
	box-shadow: 0 -4px 20px 0 rgba(0, 0, 0, 0.15);
}
.core-eng-solutions .core-eng h6 {
	margin: 0;
	text-align: left;
}
.core-eng-solutions .swiper-slide-inner {
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 0 20px 36px 0 rgba(0, 0, 0, 0.35);	
}
.core-eng-solutions .swiper-slide-inner .core-eng {
	display: flex;
	flex-direction: column;
	gap: 0px;
	transition: gap 0.5s ease;
}
.core-eng-solutions .swiper-slide-inner:hover .core-eng {
	gap: 8px;
}
.core-eng-solutions .swiper-slide-inner .core-eng p {
	overflow: hidden;
	text-align: left;
	font-style: normal;
	height: 0;
	margin: 0;
	transition: height 0.5s ease;
}
.core-eng-solutions .swiper-slide-inner:hover .core-eng p {
	height: 2em;
}
@media (max-width: 767px) {
	.core-eng-solutions .swiper-slide-inner .core-eng {
		gap: 8px;
	}
	.core-eng-solutions .swiper-slide-inner .core-eng p {
		height: inherit;
	}
}

/*--------------------------------------------------------------
# Slider Arrows
--------------------------------------------------------------*/
.eng-stages .elementor-swiper-button-prev,
.core-eng-solutions .elementor-swiper-button-prev,
.solutions .elementor-swiper-button-prev {
	display: none !important;
}
.solutions .elementor-swiper-button-next,
.core-eng-solutions .elementor-swiper-button-next {
	right: 5% !important;
}
.eng-stages .elementor-swiper-button-next,
.core-eng-solutions .elementor-swiper-button-next,
.solutions .elementor-swiper-button-next {
	aspect-ratio: 1 / 1;
	background: rgba(0, 0, 0, 0.40);
	border-radius: 120px;
	padding: 12px;
	transition: background 0.5s ease;
}
.eng-stages .elementor-swiper-button-next:hover,
.core-eng-solutions .elementor-swiper-button-next:hover,
.solutions .elementor-swiper-button-next:hover {
	background: rgba(0, 0, 0, 0.60);
}
@media (max-width: 767px) {
	.eng-stages .elementor-swiper-button-prev,
	.eng-stages .elementor-swiper-button-next,
	.core-eng-solutions .elementor-swiper-button-prev,
	.core-eng-solutions .elementor-swiper-button-next,
	.solutions .elementor-swiper-button-prev,
	.solutions .elementor-swiper-button-next {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Frosted Panel
--------------------------------------------------------------*/
.frosted-panel {
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	align-self: stretch;
	gap: 8px;
	padding: 24px 24px 40px 24px;
	border-radius: 4px;
	border: 1px solid rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.1);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.frosted-panel .elementor-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Partners Section
--------------------------------------------------------------*/
.partners img {
	height: 32px;	
}

/*--------------------------------------------------------------
# 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);
}

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

.post-thumbnail-container {
	width: 100%;
	position: relative;
	overflow: hidden;
	aspect-ratio: 16/9;
	border-radius: 8px;
}
.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 {

}

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

.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 {
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 8px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

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

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

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

.post-inner .read-more {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 700;
	transition: gap 0.3s ease;
}
.post-inner:hover .read-more {
	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%;
	}
}

/*--------------------------------------------------------------
# Recent News Section
--------------------------------------------------------------*/
@media (min-width: 1025px) {
	.recent-news .custom-archive-posts > article:last-child {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.projects-grid {
	display: flex;
	flex-wrap: wrap;
	column-gap: 24px;
	row-gap: 40px;
	position: relative;
}
.project-item {
	position: relative;
	aspect-ratio: 5 / 4;
	display: flex;
	flex-direction: column;
	justify-content: end;
	padding: 24px 24px 40px 24px;
	gap: 16px;
	border-radius: 8px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: scroll;
}
@media (min-width: 1441px) {
	.project-item {
		width: calc(33.33% - 16px);
	}
}
@media (max-width: 1440px) and (min-width: 768px) {
	.project-item {
		width: calc(50% - 12px);
	}
}
@media (max-width: 767px) {
	.project-item {
		width: 100%;
		padding: 16px 16px 24px 16px;
	}
}
.project-item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	border-radius: 8px;
	background-color: red;
	background: linear-gradient(180deg, rgba(0, 161, 181, 0.00) 25.47%, rgba(0, 161, 181, 0.88) 73.52%, var(--e-global-color-secondary) 100%);
}
.project-content {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.project-content h4, .project-content h6 {
	margin: 0px;
	color: var(--e-global-color-15df81f);
}

/*--------------------------------------------------------------
# Footer Section
--------------------------------------------------------------*/
.footer {
	background: linear-gradient(180deg, #021138 0%, #00195B 100%);
}
@media (max-width: 1024px) and (min-width: 768px) {
	.footer .contact-into .elementor-icon-list-items {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;	
	}
	.footer .contact-into .elementor-icon-list-item {
		width: calc(50% - 12px);
	}
}