/*
Theme Name: Win Holdings Motors
Theme URI: #
Template: hello-elementor
Author: Thimira Perera
Author URI: #
Description: Win Holdings Motors is a trusted automotive dealership focused on delivering quality vehicles, fair pricing, and a smooth car-buying experience. We connect customers with reliable cars that fit their lifestyle and budget, backed by honest service and long-term support. Whether you're buying your first car or upgrading to your next ride, Win Holdings is your trusted partner for quality vehicles.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 1.0.0.1770660087
Updated: 2026-02-09 18:01:27

*/

.elementor-icon {
	display: flex;
}

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

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

/*--------------------------------------------------------------
# Grow Now - Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-text) !important;
	fill: var(--e-global-color-text) !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-text) !important;
	fill: var(--e-global-color-text) !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-text) !important;
	fill: var(--e-global-color-text) !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-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !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-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !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-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !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-text) !important;
	color: var(--e-global-color-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !important;
	border-color: var(--e-global-color-text) !important;
}
.custom-btn-clearpath .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-text) 85%, black) !important;
	color: var(--e-global-color-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !important;
	border-color: color-mix(in srgb, var(--e-global-color-text) 85%, black) !important;
}
.custom-btn-clearpath .elementor-button:active {
	background-color: color-mix(in srgb, var(--e-global-color-text) 70%, black) !important;
	color: var(--e-global-color-8a5faef) !important;
	fill: var(--e-global-color-8a5faef) !important;
	border-color: color-mix(in srgb, var(--e-global-color-text) 70%, black) !important;
}

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

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

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

/*--------------------------------------------------------------
# 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;
	row-gap: 32px;
	column-gap: 21px;
}

/* Individual Post Item */
.archive-post-item {
	overflow: hidden;
	border-radius: 16px;
	width: calc(33.33% - 14px);
	box-shadow: 2px 4px 18px 4px rgba(0, 0, 0, 0.07);
}

.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 {
	padding: 24px;
}

.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;
}

.read-more {
	display: flex;
	gap: 8px;
	align-items: center;
}

/* 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% - 10px);
	}
}

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

/*--------------------------------------------------------------
# CSS Classes for Logged In/Out Users
--------------------------------------------------------------*/
.user-logged-in .show-logged-out {
    display: none !important; /* Only be visible to logged-out users */
}

.user-logged-out .show-logged-in {
    display: none !important; /* Only visible to logged-in users. */
}