/*
Theme Name: money doc.lk
Theme URI: https://cem.lk/
Template: hello-elementor
Author: Ceylon Exchange Mentoring
Author URI: https://cem.lk/
Description: "money doc.lk" is a professional WordPress child theme designed for financial consulting services. It features a clean landing page with service categories (investment advisory, tax planning, financial planning, insurance, estate planning, and business consulting), specialist search functionality, and a streamlined 3-step client process. The responsive layout includes clear CTAs for specialist connections and contact information.
Tags: finance, business, consulting, professional, minimal, responsive-layout, custom-colors, custom-logo, grid-layout, advisor
Version: 1.0.0.1753330681
Updated: 2025-07-24 04:18:01

*/

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

/*--------------------------------------------------------------
# Action Pulse Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-primary) !important;
	border-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-61bf961) !important;
	fill: var(--e-global-color-61bf961) !important;
}
.elementor-button:hover {
	background-color: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-61bf961) !important;
	fill: var(--e-global-color-61bf961) !important;
}
.elementor-button-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Action Pulse Lite Button
--------------------------------------------------------------*/
.custom-btn-action-pulse-lite .elementor-button {
	background-color: transparent !important;
	border-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-primary) !important;
	fill: var(--e-global-color-primary) !important;
}
.custom-btn-action-pulse-lite .elementor-button:hover {
	background-color: transparent !important;
	border-color:var(--e-global-color-secondary) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
}

/*--------------------------------------------------------------
# Clean Slate Button
--------------------------------------------------------------*/
.custom-btn-clean-slate .elementor-button {
	background-color: var(--e-global-color-61bf961) !important;
	border-color: var(--e-global-color-61bf961) !important;
	color: var(--e-global-color-099b52f) !important;
	fill: var(--e-global-color-099b52f) !important;
}
.custom-btn-clean-slate .elementor-button:hover {
	background-color: #E7E7E7 !important;
	border-color: #E7E7E7 !important;
	color: var(--e-global-color-099b52f) !important;
	fill: var(--e-global-color-099b52f) !important;
}

/*--------------------------------------------------------------
# Power Move Button
--------------------------------------------------------------*/
.custom-btn-power-move .elementor-button {
	background-color: black !important;
	border-color: black !important;
	color: var(--e-global-color-61bf961) !important;
	fill: var(--e-global-color-61bf961) !important;
}
.custom-btn-power-move .elementor-button:hover {
	background-color: var(--e-global-color-2a8c65a) !important;
	border-color: var(--e-global-color-2a8c65a) !important;
	color: var(--e-global-color-61bf961) !important;
	fill: var(--e-global-color-61bf961) !important;
}

/*--------------------------------------------------------------
# Product Search
--------------------------------------------------------------*/
.homepage-product-search {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	gap: 24px;
}
.custom-product-search {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 24px;
}
.search-fields-container {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	width: 100%;
}
@media (max-width: 767px) {
	.search-fields-container {
		width: 100%;
	}
}

.search-field-group {
	width: 100%;
}
.search-field-label {
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.2em !important;
	color: var(--e-global-color-primary) !important;
	margin-bottom: 6px;
	margin-left: 4px;
}

.search-field-group input {
	padding: 6px 16px 6px 16px !important;
	border: 2px solid transparent !important;
	border-radius: 50px !important;
	color: var(--e-global-color-text) !important;
	background: var(--e-global-color-7f34d3d) !important;	
}
.search-field-group input:focus {
	border: 2px solid rgba(245, 245, 245, 0.30) !important;	
}
.search-field-group select {
	padding: 8.5px 16px !important;
	border: 2px solid transparent !important;
	border-radius: 50px !important;
	color: var(--e-global-color-text) !important;
	background: var(--e-global-color-7f34d3d) !important;	
}
.search-field-group select:focus {
	border: 2px solid rgba(245, 245, 245, 0.30) !important;	
}
.search-field-group option {
	color: var(--e-global-color-2a8c65a) !important;
}

@media (max-width: 767px) {
	.search-field-group {
		width: 100%;
	}
}
.search-button {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	gap: 10px;
	align-items: center;
	align-self: end;
	padding: 6px 22px !important;
}

/*--------------------------------------------------------------
# Access Card
--------------------------------------------------------------*/
.access-card {
	display: flex;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	border-radius: 8px;
	background: var(--e-global-color-61bf961);
	box-shadow: 0 11px 27px 0 rgba(0, 0, 0, 0.09) !important;
}

.access-card::before {
	opacity: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #304E9D 0%, #00A3CC 100%);
	transition: opacity 0.5s ease;
}
.access-card:active::before {
	opacity: 1;
}
.access-card:hover::before {
	opacity: 1;
}

.access-card .icon-frame {
	display: flex;
	width: 80px;
	aspect-ratio: 1 / 1;
	padding: 18px;
	justify-content: center;
	align-self: center;
	gap: 8px;
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.05);
	background: rgba(230, 230, 230, 0.20);
}

.access-card .icon-white {
	position: absolute;
	top: 18px;
	left: 18px;
	width: calc(100% - 18px - 18px);
	opacity: 0;
}
.access-card:active .icon-white {
	opacity: 1;
	transition: opacity 0.5s ease;
}
.access-card:hover .icon-white {
	opacity: 1;
	transition: opacity 0.5s ease;
}

.access-card .elementor-icon {
	display: flex;
}
.access-card .access-title {
	width: 100%;
	text-align: center;
}
.access-card .access-title h5 {
	color: var(--e-global-color-2a8c65a);
}
.access-card:active .access-title h5 {
	color: var(--e-global-color-61bf961);
	transition: color 0.5s ease;
}
.access-card:hover .access-title h5 {
	color: var(--e-global-color-61bf961);
	transition: color 0.5s ease;
}

/*--------------------------------------------------------------
# Service Card
--------------------------------------------------------------*/
.service-card {
	display: flex;
	padding: 24px 24px 32px 24px;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	border-radius: 8px;
	background: var(--e-global-color-61bf961);
	box-shadow: 0 11px 27px 0 rgba(0, 0, 0, 0.09);
}
.service-card .service-inside {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}
.service-card .service-icon {
	width: 50px;
	margin-bottom: 8px !important;
}

/*--------------------------------------------------------------
# Counter Card
--------------------------------------------------------------*/
.counter-card {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row !important;
	padding: 16px;
	align-items: center;
	gap: 24px;
	border-radius: 8px;
	background: var(--e-global-color-61bf961);
}
.counter-card .count-box {
	width: 135px;
	display: flex;
	padding: 26px 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 8px;
	background: linear-gradient(180deg, #001858 0%, black 100%);
	align-self: stretch;
}
.counter-card .count-desc {
	padding-top: 10px;
	align-self: start;
	width: calc(100% - 135px - 24px);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
@media (max-width: 1366px) {
	.counter-card .count-box img {
		height: 96px;
	}
	.counter-card .count-box {
		width: 100%;
		height: 148px;
	}
	.counter-card .count-desc {
		padding-top: 0;
		width: 100%;
	}
}

/*--------------------------------------------------------------
# How to Section
--------------------------------------------------------------*/
.how-tabs {
	display: flex;
	padding: 16px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	border-radius: 8px;
	background: var(--e-global-color-61bf961);
	box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
}
.how-tabs::before {
	opacity: 0;
	border-radius: 8px;
	background: linear-gradient(180deg, #304E9D 0%, #00A3CC 100%);
	transition: opacity 0.5s ease;
}
.how-tabs:active::before {
	opacity: 1;
}
.how-tabs:hover::before {
	opacity: 1;
}
.how-tabs .how-count {
	margin-bottom: 8px !important;
	color: var(--e-global-color-primary);
	padding: 0px 10px;
	border-radius: 50px;
	background: rgba(30, 80, 155, 0.10);
	transition: background 0.5s ease, color 0.5s ease;
}
.how-tabs:hover .how-count {
	color: var(--e-global-color-61bf961);
	background: rgba(255, 255, 255, 0.30);
}
.how-tabs h6 {
	margin-bottom: 16px;
}
.how-tabs h6, .how-tabs span {
	color: var(--e-global-color-2a8c65a);
}
.how-tabs:active h6, .how-tabs:active span {
	color: var(--e-global-color-61bf961);
	transition: color 0.5s ease;
}
.how-tabs:hover h6, .how-tabs:hover span {
	color: var(--e-global-color-61bf961);
	transition: color 0.5s ease;
}

/*--------------------------------------------------------------
# Gradient Effect
--------------------------------------------------------------*/
.shadefx {
	background:
		linear-gradient(180deg, rgba(0, 50, 125, 0.70) 0%, transparent 100%),
		linear-gradient(180deg, #001858 0%, black 100%),
		radial-gradient(50% 50% at 50% 50%, transparent 0%, rgba(30, 80, 155, 0.70) 100%),
		linear-gradient(180deg, var(--e-global-color-729a281) 0%, var(--e-global-color-fab4525) 100%), #05164A;
}