/*
Theme Name: Ceylon Exchange Mentoring
Theme URI: https://www.cem.lk/
Template: hello-elementor
Author: Ceylon Exchange Mentoring (Pvt) Ltd
Author URI: https://www.cem.lk/
Description: Ceylon Exchange Mentoring (Pvt) Ltd (CEM) is a dynamic Sri Lankan holding company operating across EdTech, Capital Markets, and Digital Media. Founded in 2020, CEM empowers individuals and businesses through its two primary divisions: CEM Academy, a premier financial education institute specializing in investment and personal finance, and CEM Studios, an international digital marketing and media agency.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 2.0.0
Updated: 2026-04-14 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;
}

/*--------------------------------------------------------------
# Container Paddings
--------------------------------------------------------------*/
.pad-normal {
	padding-top: 112px;
	padding-bottom: 112px;
}
.pad-t-short {
	padding-top: 56px;
	padding-bottom: 112px;
}
.pad-b-short {
	padding-top: 112px;
	padding-bottom: 56px;
}
.pad-short {
	padding-top: 56px;
	padding-bottom: 56px;
}

@media (max-width: 1366px) and (min-width: 1025px) {
	.pad-normal {
		padding-top: 96px;
		padding-bottom: 96px;
	}
	.pad-t-short {
		padding-top: 48px;
		padding-bottom: 96px;
	}
	.pad-b-short {
		padding-top: 96px;
		padding-bottom: 48px;
	}
	.pad-short {
		padding-top: 48px;
		padding-bottom: 48px;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.pad-normal {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	.pad-t-short {
		padding-top: 32px;
		padding-bottom: 64px;
	}
	.pad-b-short {
		padding-top: 64px;
		padding-bottom: 32px;
	}
	.pad-short {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}

@media (max-width: 767px) {
	.pad-normal {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.pad-t-short {
		padding-top: 20px;
		padding-bottom: 40px;
	}
	.pad-b-short {
		padding-top: 40px;
		padding-bottom: 20px;
	}
	.pad-short {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/*--------------------------------------------------------------
# Trust - Button
--------------------------------------------------------------*/
.elementor-button {
	background-color: var(--e-global-color-primary) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !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-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: color-mix(in srgb, var(--e-global-color-primary) 85%, black) !important;
}
.elementor-button:focus {
	background-color: color-mix(in srgb, var(--e-global-color-primary) 70%, black) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: color-mix(in srgb, var(--e-global-color-primary) 70%, black) !important;
}
.elementor-button-icon {
	display: flex;
}

/*--------------------------------------------------------------
# Trust Lite - Button
--------------------------------------------------------------*/
.custom-btn-trust-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-trust-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-trust-lite .elementor-button:focus {
	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;
}

/*--------------------------------------------------------------
# Authority - Button
--------------------------------------------------------------*/
.custom-btn-authority .elementor-button {
	background-color: var(--e-global-color-secondary) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: var(--e-global-color-secondary) !important;
}
.custom-btn-authority .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, white) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: color-mix(in srgb, var(--e-global-color-secondary) 85%, white) !important;
}
.custom-btn-authority .elementor-button:focus {
	background-color: color-mix(in srgb, var(--e-global-color-secondary) 70%, white) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: color-mix(in srgb, var(--e-global-color-secondary) 70%, white) !important;
}

/*--------------------------------------------------------------
# Authority Lite - Button
--------------------------------------------------------------*/
.custom-btn-authority-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-authority-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-authority-lite .elementor-button:focus {
	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 - Button
--------------------------------------------------------------*/
.custom-btn-clear .elementor-button {
	background-color: var(--e-global-color-043845f) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: var(--e-global-color-043845f) !important;
}
.custom-btn-clear .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-043845f) 85%, black) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: color-mix(in srgb, var(--e-global-color-043845f) 85%, black) !important;
}
.custom-btn-clear .elementor-button:focus {
	background-color: color-mix(in srgb, var(--e-global-color-043845f) 70%, black) !important;
	color: var(--e-global-color-secondary) !important;
	fill: var(--e-global-color-secondary) !important;
	border-color: color-mix(in srgb, var(--e-global-color-043845f) 70%, black) !important;
}

/*--------------------------------------------------------------
# Clear Lite - Button
--------------------------------------------------------------*/
.custom-btn-clear-lite .elementor-button {
	background-color: transparent !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: var(--e-global-color-043845f) !important;
}
.custom-btn-clear-lite .elementor-button:hover {
	background-color: color-mix(in srgb, var(--e-global-color-043845f) 10%, transparent) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: var(--e-global-color-043845f) !important;
}
.custom-btn-clear-lite .elementor-button:focus {
	background-color: color-mix(in srgb, var(--e-global-color-043845f) 20%, transparent) !important;
	color: var(--e-global-color-043845f) !important;
	fill: var(--e-global-color-043845f) !important;
	border-color: var(--e-global-color-043845f) !important;
}