:root {
    --bg: #ffffff;
    --text: #000000;
    --section-bg: #f6f6f6;
    --border-color: #dadada;
}

/* Dark mode variables */
html.dark-mode {
    --bg: #0f0f0f;
    --text: #ffffff;
    --section-bg: #1a1a1a;
    --border-color: #333333;
}

/* ---------------- BASE LAYOUT ---------------- */

html {
    visibility: visible;
}

html.light-mode,
html.dark-mode {
    transition: background 0.2s ease, color 0.2s ease;
}

body {
    background: var(--bg);
    color: var(--text);
}

/* ---- FORCE WHITE BACKGROUND IN LIGHT MODE ---- */
html.light-mode body {
    background: #ffffff !important;
}

/* sections that were dark before */
html.light-mode .tdi_16_rand_style,
html.light-mode .tdi_33_rand_style {
    background: #ffffff !important;
}

/* light grey sections */
html.light-mode .tdi_62_rand_style.td-element-style,
html.light-mode .tdi_210_rand_style.td-element-style,
html.light-mode .tdi_63_rand_style,
html.light-mode .tdi_95_rand_style {
    background: #f6f6f6 !important;
}

/* ---------------- HEADER ---------------- */

html.light-mode .td-header-wrap {
    background: #ffffff;
}

/* ---------------- LINKS ---------------- */

html.light-mode a:hover,
html.light-mode .td-module-title a:hover
/* ---------------- TITLES ---------------- */

html.light-mode .td-block-title-wrap .td-block-title>*,
html.light-mode .entry-title.td-module-title a,
html.light-mode .td-editor-date a,
html.light-mode .tdb-title-text,
html.light-mode .tdb-author-name,
html.light-mode .tdb-author-by,
html.light-mode .tdb-add-text {
    color: #000000 !important;
}

/* ---------------- SECTION BACKGROUNDS ---------------- */

html.light-mode .tdi_62_rand_style.td-element-style,
html.light-mode .tdi_210_rand_style.td-element-style,
html.light-mode .tdi_63_rand_style,
html.light-mode .tdi_95_rand_style {
    background-color: var(--section-bg) !important;
    color: #000 !important;
}

/* ---------------- WEATHER ---------------- */

html.light-mode .td-icons.clear-sky-d,
html.light-mode .tdb-weather-deg-wrap,
html.light-mode .tdb-weather-city {
    color: #000000 !important;
}

/* ---------------- SOCIAL ---------------- */

html.light-mode .tdm-social-item i {
    color: #000000 !important;
}

html.light-mode .tdm-social-text {
    color: #646464 !important;
}

/* ---------------- INPUTS ---------------- */

html.light-mode .tds-input {
    background: #ffffff !important;
    color: #000000 !important;
}

/* ---------------- MENU ---------------- */

html.light-mode .tdi_37 .tdb-menu>li>a {
    color: #000000 !important;
}

html.light-mode .tdb-menu .tdb-mega-menu .sub-menu>li,
html.light-mode .tdb-menu .tdb-normal-menu ul {
    background-color: #f6f6f6 !important;
}

html.light-mode .tdb-menu .tdb-normal-menu ul .tdb-menu-item>a {
    color: #000000 !important;
}

/* ---------------- POST HOVER ---------------- */

html.light-mode .sub-menu .entry-title.td-module-title a:hover {
    color: #b80f14 !important;
}

html.light-mode .sub-menu .td-module-container:hover .td-module-title a {
    box-shadow: inset 0 -1px 0 0 #b80f14 !important;
}

html.light-mode .td_module_wrap:hover .td-module-title a {
    color: #b80f14 !important;
}

/* ---------------- PAGINATION ---------------- */

html.light-mode .td-next-prev-wrap a {
    color: #808080 !important;
    border: 1px solid #808080 !important;
}

html.light-mode .td-next-prev-wrap a:hover {
    color: #ffffff !important;
    border: 1px solid #b80f14 !important;
    background: #b80f14 !important;
}

/* ---------------- SEARCH ---------------- */

html.light-mode .tdi_21 .tdb-head-search-btn svg,
html.light-mode .tdi_21 .tdb-head-search-btn svg * {
    fill: #000000 !important;
}

html.light-mode .tdi_21 .tdb-search-form::before {
    background-color: #000000 !important;
}

/* ---------------- MOBILE MENU ---------------- */

html.light-mode .tdb-mobile-menu-button {
    color: #000000 !important;
}

html.light-mode .tdb-mobile-menu-button svg,
html.light-mode .tdb-mobile-menu-button svg * {
    fill: #000000 !important;
}

/* ---------------- SVG ---------------- */

html.light-mode svg .cls-3 {
    fill: #000 !important;
}

/* ---------------- BORDERS ---------------- */

html.light-mode .td-module-container::before,
html.light-mode .tdi_92,
html.light-mode .tdi_97,
html.light-mode .tdi_125,
html.light-mode .tdi_130,
html.light-mode .tdi_139,
html.light-mode .tdi_148,
html.light-mode .tdi_189,
html.light-mode .tdi_194,
html.light-mode .tdi_203 {
    border-color: var(--border-color) !important;
}

html.light-mode .td-post-category {
    border-color: #aaa !important;
}

/* ---------------- FLOCKLER ---------------- */

html.light-mode #flockler-embed-1958536af430a8a0c9852eaf2cf22836 {
    --fl-background: #ffffff !important;
    --fl-item-background: #ffffff !important;
}

html.light-mode .flockler-embed-popup__close {
    color: #000000 !important;
}

/* ---------------- MOBILE ---------------- */

@media(max-width:767px) {
    html.light-mode .td-header-wrap {
        background: #ffffff;
    }

    html.light-mode .tdb-mobile-menu-button {
        color: #000000 !important;
    }

    html.light-mode .tdi_79_rand_style,
    html.light-mode .tdi_80_rand_style,
    html.light-mode .tdi_103_rand_style,
    html.light-mode .tdi_61_rand_style {
        background-color: #f6f6f6 !important;
    }

    html.light-mode .tdi_203 .tds-input,
    html.light-mode .tdi_108 .tds-input {
        background: #ffffff !important;
        color: #000000 !important;
    }
}

html.light-mode a:hover {
    color: #b80f14;
}

html.light-mode .td-module-title a:hover {
    color: #b80f14;
}

html.light-mode .td-block-title-wrap .td-block-title>* {
    color: #000000 !important;
}

html.light-mode .entry-title.td-module-title a {
    color: #000000 !important;
}

html.light-mode .td-editor-date a {
    color: #000000 !important;
}

html.light-mode .tdi_62_rand_style.td-element-style,
html.light-mode .tdi_118_rand_style.td-element-style,
html.light-mode .tdi_210_rand_style.td-element-style {
    background-color: #f6f6f6 !important;
}

html.light-mode [class*="_rand_style"]:not(.tdi_75_rand_style):not(.tdi_84_rand_style):not(.tdi_22_rand_style):not(.tdi_16_rand_style):not(.tdi_33_rand_style):not(.tdi_1_rand_style) {
    background-color: #f6f6f6 !important;
    color: #000000 !important;
}

html.light-mode .td-mobile-content li a:hover {
    color: #ffffff !important;
}

/* html.light-mode .tdi_95_rand_style{
    background-color: #f6f6f6 !important;
    color: #000000 !important;
} */
html.light-mode .tdi_65 .td-icons.clear-sky-d,
html.light-mode .tdi_65 .tdb-weather-deg-wrap,
html.light-mode .tdi_65 .tdb-weather-city {
    color: #000000 !important;
}

html.light-mode #flockler-embed-1958536af430a8a0c9852eaf2cf22836 {
    --fl-background: #ffffff !important;
    --fl-item-background: #ffffff !important;
}

html.light-mode .tdi_218 a,
html.light-mode .tdi_126 a,
html.light-mode .tdi_221 a,
html.light-mode .tdi_129 a {
    color: #000000 !important;
}

html.light-mode .tdi_225 .tdm-social-item i {
    color: #000000 !important;
}

html.light-mode .tdi_225 .tdm-social-text {
    color: #646464 !important;
}

html.light-mode .tdi_16_rand_style,
html.light-mode .tdi_33_rand_style {
    background-color: #ffffff !important;
}

html.light-mode .tdi_37 .tdb-menu>li>a {
    color: #000000 !important;
}

html.light-mode .tdi_32 .tdm-social-item i {
    color: #000000 !important;
}

html.light-mode .td-next-prev-wrap a {
    color: #808080 !important;
    border: 1px solid #808080 !important;
}

html.light-mode .td-next-prev-wrap a:hover {
    color: #ffffff !important;
    border: 1px solid #b80f14 !important;
}

html.light-mode .tdi_29 a,
html.light-mode .tdi_93 a,
html.light-mode .tdi_96 a,
html.light-mode .tdi_83 a,
html.light-mode .tdi_86 a,
html.light-mode .tdi_110 a,
html.light-mode .tdi_127 a {
    color: #000000 !important;
}

html.light-mode .tdi_30 .tdb-head-date-txt {
    color: #000000 !important;
}

html.light-mode .tdi_20 .tdb-mobile-menu-button {
    color: #000000 !important;
}

html.light-mode .tdi_21 .tdb-head-search-btn svg,
html.light-mode .tdi_21 .tdb-head-search-btn svg * {
    fill: #000000 !important;
}

html.light-mode svg .cls-3 {
    fill: #000 !important;
}

html.light-mode .tdi_21 .tdb-search-form::before {
    background-color: #000000 !important;
}

html.light-mode .tdi_33_rand_style>.td-element-style-before {
    border-color: #dadada !important;
}

html.light-mode .td-module-container::before {
    border-color: #dadada !important;
}

html.light-mode .tdi_92,
html.light-mode .tdi_97 {
    border-color: #dadada !important;
}

html.light-mode .tdi_125,
html.light-mode .tdi_130,
html.light-mode .tdi_139,
html.light-mode .tdi_148,
html.light-mode .tdi_189,
html.light-mode .tdi_194,
html.light-mode .tdi_203 {
    border-color: #dadada !important;
}

html.light-mode .td-post-category {
    border-color: #aaa !important;
}

html.light-mode .tdi_215 .tds-input {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html.light-mode .tdb-menu .tdb-mega-menu .sub-menu>li {
    background-color: #f6f6f6;
}

html.light-mode .sub-menu .td-editor-date .td-post-date {
    color: #000000 !important;
}

html.light-mode .sub-menu .entry-title {
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

html.light-mode .sub-menu .entry-title.td-module-title a:hover {
    color: #b80f14 !important;
}

html.light-mode .sub-menu .td-module-container:hover .td-module-title a {
    box-shadow: inset 0 -1px 0 0 #b80f14 !important;
}

html.light-mode .td_module_wrap:hover .td-module-title a {
    color: #b80f14 !important;
}

html.light-mode .tdb-menu .tdb-normal-menu ul {
    background-color: #f6f6f6 !important;
}

html.light-mode .tdb-menu .tdb-normal-menu ul .tdb-menu-item>a {
    color: #000000 !important;
}

html.light-mode .flockler-embed-popup__close {
    color: #000000 !important;
}

html.light-mode .td_with_ajax_pagination .td-next-prev-wrap a:hover {
    background-color: #b80f14 !important;
    border-color: #b80f14 !important;
}

html.light-mode .td_with_ajax_pagination .td-next-prev-wrap a:hover {
    color: #ffffff !important;
}

html.light-mode .tdi_103 a {
    color: #000000 !important;
}

html.light-mode .tdi_106 a {
    color: #000000 !important;
}

html.light-mode .tdi_110 .tdm-social-item i {
    color: #000000 !important;
}

html.light-mode .tdi_110 .tdm-social-text {
    color: #646464 !important;
}

html.light-mode .tdi_100 .tds-input {
    background-color: #ffffff !important;
    color: #000000 !important;
}

html.light-mode .tdb-title-text {
    color: #000000 !important;
}

html.light-mode .tdb-author-name {
    color: #000000 !important;
}

html.light-mode .tdb-author-by {
    color: #000000 !important;
}

html.light-mode .tdb-add-text {
    color: #000000 !important;
}

html.light-mode .tdb-block-inner.td-fix-index,
html.light-mode .tdb-block-inner.td-fix-index a {
    color: #000000 !important;
}

html.light-mode .td-social-network .td-social-but-icon i {
    color: #000000 !important;
}

html.light-mode .tdi_89 h1,
html.light-mode .tdi_89 h2,
html.light-mode .tdi_89 h3:not(.tds-locker-title),
html.light-mode .tdi_89 h4,
html.light-mode .tdi_89 h5,
html.light-mode .tdi_89 h6,
html.light-mode .tdi_63 h6,
html.light-mode .tdi_63 h1,
html.light-mode .tdi_63 h2,
html.light-mode .tdi_63 h3:not(.tds-locker-title),
html.light-mode .tdi_63 h4,
html.light-mode .tdi_63 h5,
html.light-mode .tdi_63 h6,
html.light-mode .tdi_63,
html.light-mode .tdi_71 h3,
html.light-mode .tdi_71 h2,
html.light-mode .tdi_71 h4,
html.light-mode .tdi_77 h3,
html.light-mode .tdi_77 h2,
html.light-mode .tdi_77 h4,
html.light-mode .tdi_83 h3,
html.light-mode .tdi_83 h2,
html.light-mode .tdi_83 h4,
html.light-mode .tdi_63 .td-page-content,
html.light-mode .tdi_63 .td-page-content p {
    color: #000000 !important;
}

html.light-mode .tdi_69 .tdm-descr,
html.light-mode .tdi_75 .tdm-descr {
    color: #666666 !important;
}
html.light-mode article .td-module-meta-info .td-editor-date .td-post-category {
    color: #ffffff !important;
}
html.light-mode .tdb-category.td-fix-index .tdb-entry-category:hover{
    color: #ffffff !important;
    background-color: #b80f14 !important;
}
html.light-mode .td_flex_block_1.tdi_108 .td-module-meta-info .td-editor-date .td-post-category {
    color: #000000 !important;
}
html.light-mode .tdi_70 .page-nav a:hover {
    color: #ffffff !important;
    background-color: #b80f14 !important;
    border-color: #b80f14 !important;
}
/* Add more rules for other elements as needed, following the same pattern */
@media (max-width: 767px) {
    html.light-mode .tdi_3_rand_style {
        background-color: #ffffff !important;
    }
    html.light-mode .tdi_79_rand_style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_80_rand_style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_103_rand_style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_61_rand_style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdb-mobile-menu-button {
        color: #000000 !important;
    }
    html.light-mode a:hover {
        color: #b80f14;
    }
    html.light-mode .td-module-title a:hover {
        color: #b80f14;
    }
    html.light-mode .td-block-title-wrap .td-block-title>* {
        color: #000000 !important;
    }
    html.light-mode .entry-title.td-module-title a {
        color: #000000 !important;
    }
    html.light-mode .td-editor-date a {
        color: #000000 !important;
    }
    html.light-mode .tdi_62_rand_style.td-element-style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_210_rand_style.td-element-style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_63_rand_style {
        background-color: #f6f6f6 !important;
        color: #000000 !important;
    }
    html.light-mode .td-icons.clear-sky-d,
    html.light-mode .tdb-weather-deg-wrap,
    html.light-mode .tdb-weather-city {
        color: #000000 !important;
    }
    html.light-mode svg .cls-3 {
        fill: #000 !important;
    }
    html.light-mode .tdb-header-search-button-mob svg,
    html.light-mode .tdb-header-search-button-mob svg * {
        fill: #000000 !important;
    }
    html.light-mode .tdi_198_rand_style {
        background-color: #f6f6f6 !important;
    }
    html.light-mode .tdi_203 .tds-input {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    html.light-mode .tdi_108 .tds-input {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    html.light-mode .tdi_206 a,
    html.light-mode .tdi_209 a,
    html.light-mode .tdi_111 a,
    html.light-mode .tdi_114 a,
    html.light-mode .tdi_101 a {
        color: #000000 !important;
    }
    html.light-mode .tdm-social-item i {
        color: #000000 !important;
    }
    html.light-mode .tdm-social-text {
        color: #646464 !important;
    }
    html.light-mode .tdi_154 {
        border-color: unset !important;
        border-style: unset !important;
        border-width: unset !important;
    }
    html.light-mode .tdi_177,
    html.light-mode .tdi_182,
    html.light-mode .tdi_191,
    html.light-mode .tdi_91,
    html.light-mode .tdi_100,
    html.light-mode .tdi_118,
    html.light-mode .tdi_127,
    html.light-mode .tdi_138,
    html.light-mode .tdi_147 {
        border-color: #dadada !important;
    }
    html.light-mode .tdb-title-text,
    html.light-mode .tdi_78 h1,
    html.light-mode .tdi_78 h2,
    html.light-mode .tdi_78 h3,
    html.light-mode .tdi_78 h4,
    html.light-mode .tdi_78 h5 {
        color: #000000 !important;
    }
    html.light-mode .tdb-mobile-menu-button svg,
    html.light-mode .tdb-mobile-menu-button svg * {
        fill: #000000 !important;
    }
    html.light-mode article .td-module-meta-info .td-editor-date .td-post-category {
        color: #ffffff !important;
    }
    html.light-mode .page-nav.td-pb-padding-side a {
        color: #ffffff !important;
    }
    html.light-mode .td_flex_block_1.tdi_96 .td-module-meta-info .td-editor-date .td-post-category {
        color: #000000 !important;
    }
    /* keep the rest of your rules here exactly the same */
}
/* ---------------- GLOBAL THEME VARIABLES ---------------- */
/*  Toggle Button */
/* Toggle container */
.theme-switch {
    position: fixed;
    bottom: 50px;
    right: 20px;
    z-index: 9999;
    top: 0;
    margin-top: 20px;
}
/* hide checkbox */
.theme-switch input {
    display: none;
}
/* slider */
.theme-slider {
    width: 70px;
    height: 34px;
    background: #333;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
}
/* toggle circle */
.theme-slider::before {
    content: "";
    position: absolute;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    left: 3px;
    top: 3px;
    transition: 0.3s;
}
/* move circle */
#theme-toggle:checked+.theme-slider::before {
    transform: translateX(36px);
}
/* icons */
.theme-slider .icon {
    font-size: 14px;
    z-index: 2;
}
/* light mode style */
html.light-mode .theme-slider {
    background: #6a6a6a;
}
/* MOBILE STYLE */
@media (max-width:767px) {
    .theme-switch {
        position: relative;
        /* left:92%; */
        right: 0px;
        /* transform:translateX(-50%); */
        /* top:30%; */
        bottom: auto;
        margin-top: 0px;
        /* z-index:9999; */
    }
    /* make slider vertical */
    .theme-slider {
        width: 34px;
        height: 70px;
        flex-direction: column;
        padding: 8px 0;
    }
    /* move circle vertically */
    .theme-slider::before {
        width: 28px;
        height: 28px;
        left: 3px;
        top: 3px;
    }
    /* when toggle is active move down */
    #theme-toggle:checked+.theme-slider::before {
        transform: translateY(36px);
    }
    /* adjust icon size */
    .theme-slider .icon {
        font-size: 14px;
    }
    /* drawer container */
    .theme-drawer {
        position: fixed;
        top: 40%;
        right: -60px;
        display: flex;
        align-items: center;
        z-index: 9999;
        transition: 0.3s;
    }
    /* open drawer */
    .theme-drawer.open {
        right: 0;
    }
    /* arrow button */
    .drawer-arrow {
        width: 23px;
        height: 50px;
        background: #6a6a6a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 5px 0 0 5px;
        font-size: 18px;
    }
    /* drawer panel */
    .drawer-panel {
        background: #333;
        padding: 10px;
        border-radius: 10px 0 0 10px;
    }
}