html {
    font-size: var(--site-font-size-base, 15px);
}

body.theme-four-body {
    background: var(--site-body-bg, #0e1117) !important;
    color: var(--site-text-color, #f4f7fb) !important;
    font-size: var(--site-font-size-base, 15px);
}

body.theme-four-body,
body.theme-four-body p,
body.theme-four-body span,
body.theme-four-body li,
body.theme-four-body a,
body.theme-four-body input,
body.theme-four-body button,
body.theme-four-body select,
body.theme-four-body textarea {
    font-size: var(--site-font-size-base, 15px);
}

.theme-four-topbar {
    background: var(--site-topbar-bg, rgba(9,11,17,.92)) !important;
}

.theme-four-header {
    background: var(--site-header-bg, rgba(7,10,15,.96)) !important;
}

.theme-four-nav {
    background: var(--site-nav-bg, #0b1018) !important;
}

.theme-four-logo {
    background: var(--site-logo-bg, #05070b) !important;
    border-radius: var(--site-radius-md, 14px) !important;
}

.theme-four-search form {
    background: var(--site-search-bg, #0f131a) !important;
    border: 1px solid var(--site-panel-border, rgba(255,255,255,.08)) !important;
}

.theme-four-search input {
    color: var(--site-search-text, #ffffff) !important;
    font-size: var(--site-font-size-input, 15px) !important;
}

.theme-four-search button {
    color: var(--site-search-icon, #d9dfeb) !important;
}

.theme-four-nav__list a,
.tf-nav-trigger {
    background: var(--site-menu_item-bg, #141926);
}

.theme-four-nav__list a,
.tf-nav-trigger {
    background: var(--site-menu-item-bg, #141926) !important;
    border: 1px solid var(--site-menu-item-border, rgba(255,255,255,.05)) !important;
    color: var(--site-menu-item-text, #d4dceb) !important;
    font-size: var(--site-font-size-menu, 14px) !important;
}

.theme-four-nav__list a:hover,
.theme-four-nav__list a.active,
.tf-nav-trigger:hover {
    background: var(--site-menu-item-active-bg, #1b2232) !important;
    color: var(--site-menu-item-active-text, #fff) !important;
}

.tf-panel {
    background: var(--site-panel-bg, #141926) !important;
    border: 1px solid var(--site-panel-border, rgba(255,255,255,.08)) !important;
    border-radius: var(--site-radius-lg, 18px) !important;
    box-shadow: var(--site-shadow, 0 18px 45px rgba(0,0,0,.32)) !important;
}

.tf-btn {
    font-size: var(--site-font-size-button, 14px) !important;
    border-radius: var(--site-radius-sm, 12px) !important;
}

.tf-section-head h2 {
    font-size: var(--site-font-size-heading-md, 24px) !important;
}

.tf-hero__title {
    font-size: var(--site-font-size-heading-lg, 38px) !important;
}