:root {
    --sf-dark: #1E2F28;
    --sf-sage: #9DB59A;
    --sf-cream: #F2F4EE;
    --sf-grey: #B9B8B6;
    --sf-white: #FFFFFF;
}

html,
body {
    background: var(--sf-cream);
    color: var(--sf-dark);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--sf-dark);
}

p,
.blog-item .bi-text ul li,
.ts-item p,
.ps-item ul li,
.sidebar-option .so-categories ul li a,
.latest-large-set .ll-text ul li,
.latest-item .li-text ul li,
.blog-details-text .blog-details-title ul li,
.blog-details-text .blog-details-title p,
.blog-details-text .blog-details-tag-share .tags a,
.contact-widget .cw-text p,
.footer-section .fs-about p,
.footer-section .fa-social a,
.footer-section .fs-widget ul li a,
.copyright-text p,
.copyright-text a,
.copyright-text i {
    color: rgba(30, 47, 40, 0.74);
}

a:hover,
a:focus {
    color: var(--sf-sage);
}

.section-title span,
.cs-item span,
.class-item .ci-text span,
.cta-section .cta-text h2 span,
.price-item .pi-price h2,
.ps-item h3,
.blog-item .bi-text span,
.footer-section .fs-widget h4,
.contact-widget .cw-text i,
.breadcrumb-section .breadcrumb-text .bt-option a,
.blog-details-text .blog-details-title .post-date,
.bd-quote p,
.sidebar-option .so-latest h5,
.latest-large-set .ll-text h5 a,
.latest-item .li-text h6 a,
.leave-comment h5,
.contact-section .section-title span,
.about-text .section-title span,
.team-title .section-title span,
.gallery-section .section-title span,
.bmi-text .section-title span {
    color: var(--sf-sage) !important;
}

.primary-btn,
.site-btn,
.cs-item:hover span,
.bs-text .play-btn,
.price-item .primary-btn,
.gettouch-section,
.search-model-form button,
.blog-pagination a:hover,
.blog-pagination a.active,
.leave-comment form button,
.contact-form form button,
.sidebar-option .so-tags a:hover,
.canvas-open,
.offcanvas-menu-wrapper .canvas-close {
    background: var(--sf-sage) !important;
    border-color: var(--sf-sage) !important;
    color: var(--sf-dark) !important;
}

.primary-btn:hover,
.site-btn:hover,
.price-item:hover .primary-btn,
.search-model-form button:hover,
.leave-comment form button:hover,
.contact-form form button:hover {
    background: var(--sf-dark) !important;
    border-color: var(--sf-dark) !important;
    color: var(--sf-white) !important;
}

#preloder,
.choseus-section,
.pricing-section,
.team-section,
.bmi-calculator-section,
.blog-section,
.contact-section,
.classes-timetable-section,
.team-section.team-page,
.aboutus-section,
.services-section,
.blog-details-section {
    background: var(--sf-cream) !important;
}

.classes-section,
.gallery-section,
.footer-section,
.latest-blog-section,
.contact-widget-section,
.team-section.team-page,
.class-details-section,
.breadcrumb-section {
    background: var(--sf-white) !important;
}

.header-section {
    background: transparent !important;
    border-bottom: 0 !important;
}

.logo img {
    width: auto;
    max-height: 74px;
}

.nav-menu ul li a,
.top-option .to-search i,
.top-option .to-social a {
    color: var(--sf-white) !important;
}

.nav-menu ul li .dropdown li a,
.canvas-open i,
.offcanvas-menu-wrapper .canvas-close i,
.offcanvas-menu-wrapper .canvas-search i,
.slicknav_nav a,
.slicknav_nav .slicknav_row {
    color: var(--sf-dark) !important;
}

.nav-menu ul li.active > a,
.nav-menu ul li:hover > a,
.nav-menu ul li a:hover,
.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover {
    color: var(--sf-sage) !important;
}

.nav-menu ul li a:after,
.nav-menu ul li .dropdown,
.offcanvas-menu-wrapper,
.slicknav_nav {
    background: var(--sf-white) !important;
}

.nav-menu ul li .dropdown {
    border: 1px solid rgba(157, 181, 154, 0.28);
    box-shadow: 0 18px 45px rgba(30, 47, 40, 0.12);
}

.top-option .to-search:after {
    background: rgba(30, 47, 40, 0.22);
}

.hs-slider .hs-item:before,
.breadcrumb-section:before,
.banner-section:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(30,47,40,.72), rgba(30,47,40,.28));
    pointer-events: none;
}

.hs-slider .hs-item,
.breadcrumb-section,
.banner-section {
    position: relative;
}

.hs-slider .hs-item .container,
.breadcrumb-section .container,
.banner-section .container {
    position: relative;
    z-index: 1;
}

.hs-slider .hs-item .hi-text span,
.hs-slider .hs-item .hi-text h1,
.bs-text h2,
.bs-text .bt-tips,
.breadcrumb-text h2,
.breadcrumb-text .bt-option span {
    color: var(--sf-white) !important;
}

.hs-slider .hs-item .hi-text h1 strong {
    color: var(--sf-sage) !important;
}

.hs-slider.owl-carousel .owl-nav button,
.cs-item span,
.class-item .ci-text a,
.ts-item .ti-pic .quote,
.latest-item.large-item .li-text,
.blog-item .bi-pic .bi-date,
.bd-quote,
.contact-widget .cw-text i,
.search-model-form input {
    background: rgba(157, 181, 154, 0.16) !important;
    color: var(--sf-dark) !important;
}

.cs-item h4,
.class-item .ci-text h4,
.class-item .ci-text h5,
.ps-item h3,
.ps-item .pi-price h2,
.team-item .ti-text h5,
.latest-blog-section .section-title h2,
.blog-item .bi-text h5 a,
.footer-section .fs-widget h4,
.breadcrumb-text h2,
.about-text .section-title h2,
.class-details-text .cd-text .cd-single-item h3,
.sidebar-option .so-title h5,
.blog-details-text .blog-details-title h5,
.contact-section .section-title h2,
.bmi-text .section-title h2,
.team-title .section-title h2,
.gallery-section .section-title h2 {
    color: var(--sf-dark) !important;
}

.class-item .ci-text,
.class-item .ci-text:after,
.ps-item,
.team-item .ti-text,
.blog-item .bi-text,
.footer-section,
.search-model,
.offcanvas-menu-wrapper,
.sidebar-option .so-categories,
.sidebar-option .so-latest,
.sidebar-option .so-tags,
.contact-form form input,
.contact-form form textarea,
.leave-comment form input,
.leave-comment form textarea,
.bmi-calculator-chart .chart-table table tbody tr,
.class-timetable table tbody tr td {
    background: var(--sf-white) !important;
    border-color: rgba(157, 181, 154, 0.28) !important;
}

.class-item,
.ps-item,
.blog-item,
.team-item,
.contact-widget .cw-text,
.sidebar-option > div,
.bmi-calculator-chart,
.class-timetable {
    box-shadow: 0 18px 48px rgba(30, 47, 40, 0.08);
}

.price-item:hover,
.ps-item:hover,
.team-item:hover .ti-text,
.class-item:hover .ci-text,
.blog-item:hover .bi-text {
    border-color: var(--sf-sage) !important;
}

.banner-section,
.breadcrumb-section,
.cta-section,
.gettouch-section {
    background-color: var(--sf-dark) !important;
}

.search-model-form input {
    border-color: var(--sf-sage) !important;
    color: var(--sf-dark) !important;
}

.search-model-form input::placeholder,
.contact-form form input::placeholder,
.contact-form form textarea::placeholder,
.leave-comment form input::placeholder,
.leave-comment form textarea::placeholder {
    color: rgba(30, 47, 40, 0.58) !important;
}

.slicknav_btn {
    background-color: var(--sf-sage) !important;
}

.slicknav_menu {
    background: transparent !important;
}

.barfiller .fill {
    background: var(--sf-sage) !important;
}

.footer-section .fs-about .fa-logo img {
    max-height: 90px;
    width: auto;
}