/* Kasa light theme + modern type
   Outfit for display / nav / buttons, Manrope for body.
   Light mode only: no dark surfaces, no color-scheme flip. */

:root {
	--font-display: "Outfit", "Avenir Next", "Segoe UI", sans-serif;
	--font-body: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
	--bg: #f6f7f5;
	--surface: #ffffff;
	--text: #2c2e2d;
	--text-muted: #5e615f;
	--border: #e2e4e1;
	--footer: #eef0ed;
	--accent: #fab702;
}

html {
	background: var(--bg) !important;
	color-scheme: light only;
}

body,
body.de_light {
	font-family: var(--font-body);
	color: var(--text-muted);
	background: var(--surface);
}

h1, h2, h3, h4, h5, h6,
#mainmenu,
.btn,
a.btn,
.btn-line,
a.btn-line,
.btn-slider,
a.btn-slider,
.teaser-text,
.text-slider,
#filters,
.de_tab.tab_steps .de_nav li span,
.de_count h3,
.typing-wrap,
.teaser,
.label,
.big-white,
.ultra-big-white,
#revolution-slider,
.tp-caption {
	font-family: var(--font-display);
}

p,
.intro,
.content-textt,
.de_testi,
address,
.form-control,
#contact_form input,
#contact_form textarea,
.widget_text {
	font-family: var(--font-body);
}

body.de_light h1,
body.de_light h2,
body.de_light h3,
body.de_light h4,
body.de_light h5,
body.de_light h6 {
	color: var(--text);
}

a,
body.de_light a {
	color: var(--text);
}

a:hover,
body.de_light a:hover {
	color: var(--text);
}

.de-video-content a.btn-slider,
a.btn-slider {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.14);
	border: 2px solid #ffffff;
}

.de-video-content a.btn-slider:hover,
a.btn-slider:hover {
	color: var(--text) !important;
	background: #ffffff;
	border-color: #ffffff;
}

header,
header.header-light,
header.smaller:not(.header-bottom).header-light {
	background: var(--surface);
	border-bottom-color: var(--border);
}

#mainmenu a,
header.transparent.header-light #mainmenu a {
	color: var(--text);
}

#mainmenu li li,
header #mainmenu li ul li:first-child {
	border-bottom-color: var(--border);
	border-top-color: var(--border);
}

#mainmenu li li a,
#mainmenu li li li a {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
}

#mainmenu li li a:hover,
#mainmenu ul li:hover > a {
	color: var(--text) !important;
	background: var(--bg);
}

#content,
.de_light #content,
section,
.de_light section {
	background: var(--surface);
}

#section-steps {
	background: url("../images/bg-2.jpg") center / cover no-repeat;
}

#section-team,
.de_light #section-team {
	background: var(--bg);
}

#section-testimonial,
#section-testimonial.text-light,
#section-about-us-2,
.de_light #section-about-us-2 {
	background: var(--bg) !important;
	color: var(--text-muted);
}

#section-testimonial h1,
#section-testimonial h2,
#section-testimonial h3,
#section-testimonial.text-light h1,
#section-testimonial.text-light h2,
#section-testimonial.text-light h3,
#section-testimonial.text-light h4,
#section-testimonial.text-light h5 {
	color: var(--text) !important;
}

.de_testi blockquote {
	background: var(--surface);
	color: var(--text);
	border: 1px solid var(--border);
	box-shadow: 0 12px 32px rgba(44, 46, 45, 0.06);
}

.de_testi blockquote,
.de_testi blockquote p {
	color: var(--text);
}

.de_testi blockquote:before {
	background: var(--accent);
	color: var(--text);
}

.de_testi_by {
	color: var(--text-muted);
}

#subheader,
.page-about #subheader,
.page-services #subheader {
	background: var(--bg) !important;
}

#subheader h1 {
	color: var(--text);
}

#subheader span,
#subheader .crumb {
	color: var(--text-muted);
}

footer {
	background: var(--footer);
	color: var(--text-muted);
}

footer h3,
.de_light footer h3 {
	color: var(--text);
}

footer a,
footer a:visited {
	color: var(--text-muted);
}

footer a:hover {
	color: var(--text);
}

.subfooter {
	background: #e6e8e4;
	color: var(--text-muted);
}

#contact_form input[type=text],
#contact_form textarea,
#contact_form input[type=email],
#search,
.de_light #contact_form input[type=text],
.de_light #contact_form textarea,
.de_light #contact_form input[type=email],
.de_light #search,
.form-control,
select {
	background: var(--bg) !important;
	border: 1px solid var(--border) !important;
	color: var(--text) !important;
}

#contact_form input::placeholder,
#contact_form textarea::placeholder,
.form-control::placeholder {
	color: #8a8d8b;
}

#contact_form input[type=submit]:hover {
	background: var(--text);
	border-color: var(--text);
	color: var(--surface) !important;
}

address span,
.de_light .widget_text address span {
	border-bottom-color: var(--border);
}

.btn-line,
a.btn-line,
.de_light .btn-line,
.de_light a.btn-line {
	border: solid 1px rgba(44, 46, 45, 0.28) !important;
	color: var(--text);
}

header.header-mobile {
	background: var(--surface);
}

header.header-mobile #mainmenu a,
header.header-mobile #mainmenu li a {
	color: var(--text);
}

header.header-mobile #mainmenu li,
header.header-mobile #mainmenu li ul li a,
header.header-mobile #mainmenu li ul li ul li:last-child,
header #mainmenu li ul li:first-child {
	border-bottom-color: var(--border) !important;
	border-top-color: var(--border) !important;
	border-color: var(--border) !important;
}

header.header-mobile #mainmenu  li li a:hover {
	color: var(--text) !important;
}

header.header-mobile #mainmenu  li li a:hover,
#mainmenu a:hover {
	background: var(--bg) !important;
	color: var(--text) !important;
}

#menu-btn {
	background: var(--text);
}

#menu-btn:before {
	color: var(--surface);
}

#jpreOverlay {
	background-color: var(--surface);
}

#jpreLoader {
	background: var(--border);
}

#jprePercentage {
	color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
	html,
	body,
	body.de_light {
		background: var(--surface);
		color: var(--text-muted);
		color-scheme: light;
	}
}