/*
Theme Name: Unit Trust Association Sri Lanka
Theme URI: #
Template: hello-elementor
Author: Ceylon Exchange Mentoring (Pvt) Ltd
Author URI: https://cem.lk/
Description: A modern and professional WordPress theme designed for the Unit Trust Association Sri Lanka. It focuses on clarity, accessibility, and performance, offering custom layouts for showcasing members, publications, regulations, blogs, and media galleries. With flexible design options, multi-language support, and strong investment-oriented branding, it helps users learn, invest, and grow confidently.
Tags: accessibility-ready, flexible-header, custom-colors, custom-menu, custom-logo, featured-images, rtl-language-support, threaded-comments, translation-ready, blog, education, news, one-column, two-columns, right-sidebar, footer-widgets, sticky-post, full-width-template
Version: 2.0.0
Updated: 2025-09-20 00:00:00

*/

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.home-hero {
	overflow: hidden;
	min-height: 644px;
	padding: 0;
}
@media (max-width: 1024px) {
	.home-hero {
		min-height: inherit;
	}
}
.home-hero::before {
	z-index: 0;
	backdrop-filter: blur(3px);
}
.home-hero::after {
	z-index: 2;
	background: linear-gradient(180deg,
		var(--e-global-color-primary) 0%, transparent 22.89%, transparent 39.33%, transparent 100%),
		linear-gradient(90deg, var(--e-global-color-primary) 0%, rgba(24, 123, 129, 0.50) 34.12%, transparent 40.99%, transparent 100%);
}
@media (max-width: 767px) {
	.home-hero::after {
		background: linear-gradient(to bottom, var(--e-global-color-primary), transparent);
	}
}

.split-left-hero {
	padding: 24px 0px;
	z-index: 3;
}
@media (max-width: 1024px) {
	.split-left-hero {
		padding-bottom: 0px;
		padding-top: 24px;
	}
}

.split-right-hero {
	z-index: 3;
	margin-right: -15%;
	width: calc(50% - 20px + 15%);
}
@media (max-width: 1024px) {
	.split-right-hero {
		margin-right: 0;
		width: 90%;
	}
}
@media (max-width: 1024px) {
	.split-right-hero {
		z-index: 2;
	}
}

/*--------------------------------------------------------------
# Text Styles
--------------------------------------------------------------*/
.chromatic-ink {
	background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, var(--e-global-color-secondary) 10%, var(--e-global-color-primary) 40%, var(--e-global-color-primary) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

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

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

/*--------------------------------------------------------------
# Mini Report Widget
--------------------------------------------------------------*/
.uta-mini-report-date {
	display: none;
}
.uta-mini-report-item {
	display: flex;
	justify-content: space-between;
	color: var(--e-global-color-0c35808);
}
.uta-mini-report-item a {
	color: var(--e-global-color-0c35808) !important;
}
.uta-mini-report-item a:hover {
	color: var(--e-global-color-bd244ae) !important;
}

/*--------------------------------------------------------------
# Frosted Card
--------------------------------------------------------------*/
.frosted-card {
	display: flex;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	align-items: flex-start;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.40);
	background: rgba(0, 0, 0, 0.23);
	box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.11);
	backdrop-filter: blur(10px);
}

/*--------------------------------------------------------------
# UTA Service Card
--------------------------------------------------------------*/
.uta-services {
	overflow: hidden;
	border-radius: 16px;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
@media (max-width: 1024px) and (min-width: 768px) {
	.uta-services .content {
		padding: 16px 16px 24px 16px !important;
	}   
}
@media (max-width: 767px) {
	.uta-services {
		align-self: inherit;
	}
	.uta-services .content {
		padding: 16px 16px 24px 16px !important;
	}
}
.uta-services .image::after {
	background: linear-gradient(to bottom, transparent 0%, transparent 80%, var(--e-global-color-primary) 100%);
}
.uta-services .content {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	gap: 32px;
	height: 100%;
	padding: 24px 24px 32px 24px;
	background-color: var(--e-global-color-primary);
}
@media (max-width: 767px) {
	.uta-services .content {
		height: inherit;
	}
	.uta-services .elementor-button {
		width: 100%;
	}
}
.uta-services .content .sub-content {
	display: flex;
	flex-direction: column;
	justify-content: start;
	gap: 24px;
}
.uta-services .content h5 {
	color: var(--e-global-color-0c35808);
}
.uta-services .content p {
	color: var(--e-global-color-0c35808);
	margin: 0;
}

/*--------------------------------------------------------------
# White Box
--------------------------------------------------------------*/
.white-box {
	display: flex;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	gap: 24px;
	max-width: 420px;
	background-color: var(--e-global-color-0c35808);
	border-radius: 16px;	
	box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.11);
}

/*--------------------------------------------------------------
# Simple Box
--------------------------------------------------------------*/
.inv-simple-box {
	display: flex;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.50);
	background: var(--e-global-color-0c35808);
}
.inv-simple-box .content {
	overflow: hidden;
	padding-top: 0px;
	max-height: 0;
	transition: max-height 1.5s ease, padding 0.5s ease;
}
.inv-simple-box:hover .content {
	padding-top: 16px;
	max-height: 160px;
}
@media (max-width: 1024px) {
	.inv-simple-box {
		padding: 16px 16px 24px 16px;
	}
}
@media (max-width: 767px) {
	.inv-simple-box .content {
		padding-top: 16px;
		max-height: inherit;
	}
	.inv-simple-box:hover .content {
		padding-top: inherit;
		max-height: inherit;
	}
}

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