/* ============================================================ Dark Mode — triggered by [data-theme="dark"] on Comprehensive coverage based on actual SCSS source files: _variable.scss, _general.scss, _about.scss, _department.scss, _post.scss, _iconbox.scss, _sidebar.scss, _footer.scss, _testimonial.scss, _team.scss, _funfact.scss, _hero.scss, _cta.scss, _accordion.scss, _pricing_card.scss, _banner.scss ============================================================ */ /* ---------- CSS Variable Overrides ---------- */ html[data-theme="dark"] { --white: #1e293b; --primary: #e2e8f0; --secondary: rgba(203, 213, 225, 0.7); --accent: #3b82f6; --ternary: #64748b; --border: #334155; --gray: #162033; } /* ---------- Transition for smooth toggle ---------- */ html[data-theme="dark"] *, html[data-theme="dark"] *::before, html[data-theme="dark"] *::after { transition: background-color .3s ease, color .2s ease, border-color .3s ease, box-shadow .3s ease; } /* ---------- Global body ---------- */ html[data-theme="dark"] body { background-color: #0f172a !important; color: #e2e8f0 !important; } /* ---------- Global bg/color utility overrides (from _general.scss) ---------- */ html[data-theme="dark"] .cs_white_bg, html[data-theme="dark"] .bg-white { background-color: #1e293b !important; } html[data-theme="dark"] .cs_gray_bg_1 { background-color: rgba(22, 32, 51, 0.8) !important; } html[data-theme="dark"] .cs_half_bg::before, html[data-theme="dark"] .cs_half_bg_2::before { background-color: #0f172a !important; } html[data-theme="dark"] .cs_heading_color { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_body_color { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_accent_color { color: #60a5fa !important; } html[data-theme="dark"] .cs_white_color { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_shadow_1 { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_shadow_2 { box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] hr { border-top-color: #334155 !important; } /* ---------- Form fields (from _general.scss) ---------- */ html[data-theme="dark"] .cs_form_field, html[data-theme="dark"] .react-datepicker__input-container input { border-color: #475569 !important; background-color: #162033 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_form_field:focus { border-color: #60a5fa !important; } html[data-theme="dark"] .cs_form_field_2 { border-color: #475569 !important; background-color: #162033 !important; color: #e2e8f0 !important; } html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control { background-color: #162033 !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; } html[data-theme="dark"] label { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_input_label { color: #cbd5e1 !important; } /* ---------- Header ---------- */ html[data-theme="dark"] .doh_header { background: #1e293b; box-shadow: 0 2px 16px rgba(0,0,0,.3); } html[data-theme="dark"] .doh_header--sticky { box-shadow: 0 4px 24px rgba(0,0,0,.4); } html[data-theme="dark"] .doh_topbar { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1a2744 100%); } html[data-theme="dark"] .doh_main { background: #1e293b; border-bottom-color: #334155; } html[data-theme="dark"] .doh_main__brand { border-right-color: #334155; } html[data-theme="dark"] .doh_header--rtl .doh_main__brand { border-left-color: #334155; } /* Nav links */ html[data-theme="dark"] .doh_nav__link { color: #cbd5e1; } html[data-theme="dark"] .doh_nav__link:hover { background: rgba(96,165,250,.1); color: #93c5fd; } html[data-theme="dark"] .doh_nav__item--active > .doh_nav__link { color: #93c5fd !important; background: rgba(96,165,250,.12); } html[data-theme="dark"] .doh_nav__link::after { background: #60a5fa; } html[data-theme="dark"] .doh_nav__item--active > .doh_nav__link::after { background: #f87171; } /* Nav dropdown */ html[data-theme="dark"] .doh_nav__dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 10px 40px rgba(0,0,0,.4); } html[data-theme="dark"] .doh_nav__dropdown a { color: #cbd5e1; } html[data-theme="dark"] .doh_nav__dropdown a:hover { background: rgba(96,165,250,.1); color: #93c5fd; } html[data-theme="dark"] .doh_nav__dropdown-item--active a, html[data-theme="dark"] .doh_nav__dropdown a.active { background: rgba(96,165,250,.12) !important; color: #93c5fd !important; } /* Hamburger */ html[data-theme="dark"] .doh_hamburger span { background: #cbd5e1; } /* Mobile nav */ html[data-theme="dark"] .doh_mobile { background: #1e293b; border-top-color: #334155; } html[data-theme="dark"] .doh_mobile__item { border-bottom-color: #253449; } html[data-theme="dark"] .doh_mobile__link { color: #cbd5e1; } html[data-theme="dark"] .doh_mobile__link:hover, html[data-theme="dark"] .doh_mobile__link.active { background: rgba(96,165,250,.1); color: #93c5fd; } html[data-theme="dark"] .doh_mobile__sub { background: #162033; } html[data-theme="dark"] .doh_mobile__sublink { color: #94a3b8; } html[data-theme="dark"] .doh_mobile__sublink:hover, html[data-theme="dark"] .doh_mobile__sublink.active { color: #93c5fd; background: rgba(96,165,250,.08); } /* Language dropdown */ html[data-theme="dark"] .doh_lang__menu { background: #1e293b; box-shadow: 0 8px 30px rgba(0,0,0,.4); } html[data-theme="dark"] .doh_lang__option { color: #cbd5e1; } html[data-theme="dark"] .doh_lang__option:hover { background: rgba(96,165,250,.1); color: #93c5fd; } html[data-theme="dark"] .doh_lang__item--active .doh_lang__option { background: rgba(96,165,250,.12); color: #93c5fd; } /* ---------- Main content area ---------- */ html[data-theme="dark"] .container { color: #e2e8f0; } /* Page headings */ html[data-theme="dark"] .cs_page_heading { background-color: #162033 !important; } html[data-theme="dark"] .cs_page_heading .cs_page_heading_in h1, html[data-theme="dark"] .cs_page_heading .cs_page_title { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_page_heading .breadcrumb a, html[data-theme="dark"] .cs_page_heading .breadcrumb li { color: #94a3b8 !important; } /* Cards & boxes */ html[data-theme="dark"] .cs_card, html[data-theme="dark"] .cs_post, html[data-theme="dark"] .cs_post_card, html[data-theme="dark"] .cs_iconbox, html[data-theme="dark"] .cs_service_card, html[data-theme="dark"] .cs_pricing_card, html[data-theme="dark"] .cs_portfolio_card, html[data-theme="dark"] .card, html[data-theme="dark"] .cs_about_card, html[data-theme="dark"] .cs_case_study_card { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_card:hover, html[data-theme="dark"] .cs_post:hover, html[data-theme="dark"] .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3) !important; } /* Titles and headings */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_section_title, html[data-theme="dark"] .cs_section_subtitle { color: #f1f5f9 !important; } /* Paragraph text */ html[data-theme="dark"] p, html[data-theme="dark"] .cs_text, html[data-theme="dark"] .cs_post_meta, html[data-theme="dark"] .cs_post_info, html[data-theme="dark"] span, html[data-theme="dark"] li { color: #cbd5e1; } /* Links */ html[data-theme="dark"] a { color: #93c5fd; } html[data-theme="dark"] a:hover { color: #60a5fa; } /* Section backgrounds */ html[data-theme="dark"] section, html[data-theme="dark"] .cs_section, html[data-theme="dark"] .cs_cta_section { background-color: #0f172a !important; } html[data-theme="dark"] .cs_gray_bg, html[data-theme="dark"] .cs_light_bg { background-color: #162033 !important; } /* Buttons */ html[data-theme="dark"] .cs_btn, html[data-theme="dark"] .btn { border-color: #475569; } html[data-theme="dark"] .cs_btn.cs_style_1 { background-color: #2563eb !important; color: #fff !important; } /* Forms & inputs */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select, html[data-theme="dark"] .form-control, html[data-theme="dark"] .cs_form_field { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #64748b !important; } html[data-theme="dark"] label { color: #cbd5e1 !important; } /* Tables */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: #e2e8f0; } html[data-theme="dark"] table th, html[data-theme="dark"] .table th { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } html[data-theme="dark"] table td, html[data-theme="dark"] .table td { background-color: #0f172a !important; border-color: #1e293b !important; color: #cbd5e1 !important; } html[data-theme="dark"] table tr:hover td { background-color: #162033 !important; } /* ---------- Sidebar ---------- */ html[data-theme="dark"] .cs_sidebar, html[data-theme="dark"] .cs_sidebar_widget { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_sidebar_widget_title { color: #f1f5f9 !important; } /* ---------- Footer ---------- */ html[data-theme="dark"] footer, html[data-theme="dark"] .cs_footer, html[data-theme="dark"] .cs_footer_wrap { background-color: #0c1222 !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_footer h2, html[data-theme="dark"] .cs_footer h3, html[data-theme="dark"] .cs_footer h4 { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_footer p, html[data-theme="dark"] .cs_footer li, html[data-theme="dark"] .cs_footer span, html[data-theme="dark"] .cs_footer div { background-color: transparent !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_bottom { background-color: #070d1a !important; border-top: 1px solid #1e293b !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_copyright { background-color: #070d1a !important; color: #94a3b8 !important; } /* ---------- Slider ---------- */ html[data-theme="dark"] .cs_slider_wrapper { box-shadow: 0 10px 40px rgba(0,0,0,.3); } /* ---------- Breadcrumbs ---------- */ html[data-theme="dark"] .cs_breadcrumb, html[data-theme="dark"] .breadcrumb { background-color: transparent !important; } html[data-theme="dark"] .breadcrumb-item a { color: #94a3b8 !important; } html[data-theme="dark"] .breadcrumb-item.active { color: #60a5fa !important; } /* ---------- Pagination ---------- */ html[data-theme="dark"] .pagination .page-item .page-link, html[data-theme="dark"] .cs_pagination a, html[data-theme="dark"] .cs_pagination span { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .pagination .page-item.active .page-link, html[data-theme="dark"] .cs_pagination .active { background-color: #2563eb !important; color: #fff !important; } /* ---------- Tender cards ---------- */ html[data-theme="dark"] .tender-card, html[data-theme="dark"] .tender-item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .tender-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3) !important; } /* ---------- MHPSS pages ---------- */ html[data-theme="dark"] .mhpss-section { background-color: #0f172a !important; } html[data-theme="dark"] .mhpss-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Emergency page ---------- */ html[data-theme="dark"] .emg_info { background: #0f172a; } html[data-theme="dark"] .emg_info__card { background: linear-gradient(135deg, #1e293b 0%, #162033 100%); border-color: #334155; } html[data-theme="dark"] .emg_info__body h2 { color: #f1f5f9 !important; } html[data-theme="dark"] .emg_info__body p { color: #94a3b8; } html[data-theme="dark"] .emg_when { background: #162033; } html[data-theme="dark"] .emg_when__card { background: #1e293b; border-color: #334155; color: #cbd5e1; } html[data-theme="dark"] .emg_tips { background: #0f172a; } html[data-theme="dark"] .emg_tips__card { background: #162033; border-color: #334155; } html[data-theme="dark"] .emg_tips__card h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .emg_tips__card p { color: #94a3b8; } html[data-theme="dark"] .emg_contacts { background: #162033; } html[data-theme="dark"] .emg_contacts__card { background: #1e293b; border-color: #334155; } html[data-theme="dark"] .emg_contacts__label { color: #94a3b8; } html[data-theme="dark"] .emg_contacts__number { color: #f1f5f9; } html[data-theme="dark"] .emg_section__title { color: #f1f5f9 !important; } /* ---------- Scrollbar ---------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ---------- Search overlay ---------- */ html[data-theme="dark"] .cs_header_search_box, html[data-theme="dark"] .cs_search_wrap { background-color: #1e293b !important; } html[data-theme="dark"] .cs_header_search_box input { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* ---------- Blog detail ---------- */ html[data-theme="dark"] .cs_blog_details, html[data-theme="dark"] .cs_blog_detail_content { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_blog_details blockquote, html[data-theme="dark"] blockquote { background-color: #162033 !important; border-color: #2563eb !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_comment_section { background-color: #1e293b !important; } /* ---------- Modal ---------- */ html[data-theme="dark"] .modal-content { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .modal-header { border-bottom-color: #334155 !important; } html[data-theme="dark"] .modal-footer { border-top-color: #334155 !important; } /* ---------- Dark mode toggle button ---------- */ .doh_darkmode_toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; cursor: pointer; transition: all .25s; font-size: 15px; padding: 0; flex-shrink: 0; } .doh_darkmode_toggle:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); transform: rotate(20deg); } .doh_darkmode_toggle svg { width: 16px; height: 16px; } /* ---------- Misc overrides ---------- */ html[data-theme="dark"] .cs_height_170, html[data-theme="dark"] .cs_height_120, html[data-theme="dark"] .cs_height_45 { background-color: transparent !important; } html[data-theme="dark"] hr { border-color: #334155 !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] [class*="shadow"] { box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; } /* ---------- Department cards ---------- */ html[data-theme="dark"] .cs_department_card, html[data-theme="dark"] .department-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Contact page ---------- */ html[data-theme="dark"] .cs_contact_info { background-color: #1e293b !important; } /* ---------- Banner image above footer ---------- */ html[data-theme="dark"] .container-fluid img { opacity: .85; } /* ---------- Annual reviews / publications ---------- */ html[data-theme="dark"] .annual-review-card, html[data-theme="dark"] .publication-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Survey pages ---------- */ html[data-theme="dark"] .survey-card { background-color: #1e293b !important; border-color: #334155 !important; } /* Ensure white text on dark buttons stays white */ html[data-theme="dark"] .doh_mhpss_btn { color: #fff !important; } /* ---------- Back to top button ---------- */ html[data-theme="dark"] .cs_scrollup { background-color: #2563eb !important; } /* ========================================================== EXTENDED DARK MODE — All remaining page content ========================================================== */ /* ---------- Footer Bottom ---------- */ html[data-theme="dark"] .cs_footer_bottom { background-color: #070d1a !important; border-top: 1px solid #1e293b !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_bottom_in { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_bottom a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_bottom a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_footer_main { background-color: #0c1222 !important; } html[data-theme="dark"] .cs_footer_widget_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_footer_menu_link { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_menu_link:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_footer_branding img { filter: brightness(0.9); } html[data-theme="dark"] .cs_footer .cs_menu_widget li a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer .cs_menu_widget li a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_footer.cs_accent_bg { background-color: #0c1222 !important; } html[data-theme="dark"] .cs_footer_col { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer_in { color: #94a3b8 !important; } html[data-theme="dark"] .cs_footer p, html[data-theme="dark"] .cs_footer li, html[data-theme="dark"] .cs_footer span { color: #94a3b8 !important; } /* ---------- Page Heading ---------- */ html[data-theme="dark"] .cs_page_heading.cs_style_1, html[data-theme="dark"] .cs_page_heading.cs_bg_filed { background-color: #162033 !important; position: relative; } html[data-theme="dark"] .cs_page_heading.cs_style_1::before, html[data-theme="dark"] .cs_page_heading.cs_bg_filed::before { background: rgba(15, 23, 42, 0.7) !important; } html[data-theme="dark"] .cs_page_heading .cs_page_heading_in h1, html[data-theme="dark"] .cs_page_heading .cs_page_heading_in h2, html[data-theme="dark"] .cs_page_heading .cs_page_title, html[data-theme="dark"] .cs_page_heading .cs_page_heading_title { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_page_heading .breadcrumb, html[data-theme="dark"] .cs_page_heading .breadcrumb a, html[data-theme="dark"] .cs_page_heading .breadcrumb li, html[data-theme="dark"] .cs_page_heading .breadcrumb-item { color: #94a3b8 !important; } html[data-theme="dark"] .cs_page_heading .breadcrumb-item.active { color: #60a5fa !important; } /* ---------- About Section ---------- */ html[data-theme="dark"] .cs_about, html[data-theme="dark"] .cs_about.cs_style_2 { background-color: #0f172a !important; } html[data-theme="dark"] .cs_about h2, html[data-theme="dark"] .cs_about h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_about p, html[data-theme="dark"] .cs_about .cs_about_text { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_about_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_about .cs_counter_card, html[data-theme="dark"] .cs_about .cs_fun_fact { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Department Section ---------- */ html[data-theme="dark"] .cs_dept1_section { background-color: #0f172a !important; } html[data-theme="dark"] .cs_dept1_section h2, html[data-theme="dark"] .cs_dept1_section h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_dept1_section p { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_dept1_section .card, html[data-theme="dark"] .cs_dept1_section .cs_department_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_dept1_section .card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3) !important; } /* ---------- Sidebar ---------- */ html[data-theme="dark"] .cs_sidebar { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_sidebar_item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_sidebar_widget_title { color: #f1f5f9 !important; border-bottom-color: #334155 !important; } html[data-theme="dark"] .widget_categories ul li { border-bottom-color: #253449 !important; } html[data-theme="dark"] .widget_categories ul li a { color: #94a3b8 !important; } html[data-theme="dark"] .widget_categories ul li a:hover { color: #93c5fd !important; } html[data-theme="dark"] .widget_categories ul li.active a { color: #60a5fa !important; } /* ---------- Popular Posts (Sidebar) ---------- */ html[data-theme="dark"] .cs_popular_posts li { border-bottom-color: #253449 !important; } html[data-theme="dark"] .cs_popular_post { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_popular_post_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_popular_post_title a { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_popular_post_title a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_popular_post_meta, html[data-theme="dark"] .cs_popular_post_meta li { color: #64748b !important; } html[data-theme="dark"] .cs_popular_post_meta svg { color: #475569 !important; } html[data-theme="dark"] .cs_posted_author, html[data-theme="dark"] .cs_posted_by { color: #64748b !important; } /* ---------- Newsletter (Sidebar) ---------- */ html[data-theme="dark"] .cs_newsletter, html[data-theme="dark"] .cs_newsletter.cs_style2 { background-color: #162033 !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_newsletter_title { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_newsletter_form { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_newsletter_input { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_newsletter_input::placeholder { color: #64748b !important; } /* ---------- Annual Reviews ---------- */ html[data-theme="dark"] .annual-reviews-section { background-color: #0f172a !important; } html[data-theme="dark"] .annual-reviews-year-selector { background: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .year-select-label { color: #e2e8f0 !important; } html[data-theme="dark"] .year-select { background: #162033 !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .year-select:hover { border-color: #60a5fa !important; } html[data-theme="dark"] .year-select:focus { border-color: #60a5fa !important; box-shadow: 0 0 0 3px rgba(96,165,250,.15) !important; } html[data-theme="dark"] .annual-reviews-slideshow { background: #1e293b !important; box-shadow: 0 4px 6px rgba(0,0,0,.3) !important; } html[data-theme="dark"] .slideshow-dots { background: #162033 !important; } html[data-theme="dark"] .slideshow-dot { background: #475569 !important; } html[data-theme="dark"] .slideshow-dot.active { background: #60a5fa !important; } html[data-theme="dark"] .slideshow-nav { background: rgba(30,41,59,.9) !important; color: #e2e8f0 !important; } html[data-theme="dark"] .slideshow-nav:hover { background: rgba(30,41,59,1) !important; box-shadow: 0 4px 12px rgba(0,0,0,.3) !important; } html[data-theme="dark"] .annual-reviews-empty { background: #1e293b !important; color: #94a3b8 !important; } html[data-theme="dark"] .annual-reviews-empty h3 { color: #e2e8f0 !important; } html[data-theme="dark"] .annual-reviews-empty p { color: #94a3b8 !important; } /* ---------- Google Maps / Embedded Maps ---------- */ html[data-theme="dark"] .gm-style, html[data-theme="dark"] [style*="touch-action: pan-x pan-y"] { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } html[data-theme="dark"] .gm-style img { filter: invert(100%) hue-rotate(180deg); } html[data-theme="dark"] iframe[src*="google.com/maps"], html[data-theme="dark"] iframe[src*="maps.google"] { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } html[data-theme="dark"] .cs_map, html[data-theme="dark"] .uod_map_wrap iframe { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* ---------- Blog Post Card / List ---------- */ html[data-theme="dark"] .cs_post_card, html[data-theme="dark"] .cs_post.cs_style_1 { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_post_card:hover, html[data-theme="dark"] .cs_post.cs_style_1:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3) !important; } html[data-theme="dark"] .cs_post_title, html[data-theme="dark"] .cs_post_title a { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_post_title a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_post_subtitle, html[data-theme="dark"] .cs_post_text, html[data-theme="dark"] .cs_post_date, html[data-theme="dark"] .cs_post_meta { color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_info { border-top-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_info a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_info a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_post_thumb { background-color: #162033 !important; } /* ---------- Iconbox / Service cards ---------- */ html[data-theme="dark"] .cs_iconbox, html[data-theme="dark"] .cs_iconbox.cs_style_1, html[data-theme="dark"] .cs_iconbox.cs_style_2, html[data-theme="dark"] .cs_service_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_iconbox_title, html[data-theme="dark"] .cs_service_card h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_iconbox_text, html[data-theme="dark"] .cs_service_card p { color: #94a3b8 !important; } /* ---------- Team / Doctor cards ---------- */ html[data-theme="dark"] .cs_team_card, html[data-theme="dark"] .cs_doctor_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_team_card h3, html[data-theme="dark"] .cs_doctor_card h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_team_card p, html[data-theme="dark"] .cs_doctor_card p { color: #94a3b8 !important; } /* ---------- Testimonials ---------- */ html[data-theme="dark"] .cs_testimonial, html[data-theme="dark"] .cs_testimonial_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_testimonial_text { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_testimonial_name { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_testimonial_designation { color: #94a3b8 !important; } /* ---------- Tabs / Accordion ---------- */ html[data-theme="dark"] .cs_tab_links a, html[data-theme="dark"] .cs_tab_links button { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_tab_links a.active, html[data-theme="dark"] .cs_tab_links button.active { background-color: #2563eb !important; color: #fff !important; } html[data-theme="dark"] .cs_accordion .cs_accordion_item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_accordion_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_accordion_body { color: #cbd5e1 !important; } /* ---------- Counter / Fun Fact ---------- */ html[data-theme="dark"] .cs_counter_card, html[data-theme="dark"] .cs_fun_fact { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_counter_number { color: #60a5fa !important; } html[data-theme="dark"] .cs_counter_title { color: #e2e8f0 !important; } /* ---------- CTA Section ---------- */ html[data-theme="dark"] .cs_cta, html[data-theme="dark"] .cs_cta_section { background-color: #162033 !important; background-image: none !important; } html[data-theme="dark"] .cs_cta h2, html[data-theme="dark"] .cs_cta h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_cta p { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_cta .cs_btn.cs_style_1 { background-color: #dc2626 !important; border-color: #dc2626 !important; color: #ffffff !important; } html[data-theme="dark"] .cs_cta .cs_btn.cs_style_1:hover { background-color: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important; } /* ---------- Feature Section ---------- */ html[data-theme="dark"] .cs_feature, html[data-theme="dark"] .cs_feature_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_feature_title { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_feature_text { color: #94a3b8 !important; } /* ---------- Shape wraps / decorative backgrounds ---------- */ html[data-theme="dark"] .cs_shape_wrap .cs_shape, html[data-theme="dark"] .cs_shape_wrap img { opacity: .3 !important; } /* ---------- Tag cloud ---------- */ html[data-theme="dark"] .tagcloud a, html[data-theme="dark"] .cs_tags a { background-color: #162033 !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .tagcloud a:hover, html[data-theme="dark"] .cs_tags a:hover { background-color: #2563eb !important; color: #fff !important; } /* ---------- Alert / Notice ---------- */ html[data-theme="dark"] .alert, html[data-theme="dark"] .cs_notice { background-color: #162033 !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* ---------- Badges ---------- */ html[data-theme="dark"] .badge, html[data-theme="dark"] .cs_badge { background-color: #334155 !important; color: #e2e8f0 !important; } /* ---------- Progress bar ---------- */ html[data-theme="dark"] .cs_progress_bar, html[data-theme="dark"] .progress { background-color: #1e293b !important; } /* ---------- Dropdown general ---------- */ html[data-theme="dark"] .cs_dropdown_list, html[data-theme="dark"] .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 30px rgba(0,0,0,.4) !important; } html[data-theme="dark"] .cs_dropdown_list li a, html[data-theme="dark"] .dropdown-menu a, html[data-theme="dark"] .dropdown-item { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_dropdown_list li a:hover, html[data-theme="dark"] .dropdown-menu a:hover, html[data-theme="dark"] .dropdown-item:hover { background-color: rgba(96,165,250,.1) !important; color: #93c5fd !important; } /* ---------- Global wrapper / content areas ---------- */ html[data-theme="dark"] .cs_content, html[data-theme="dark"] .cs_main_content, html[data-theme="dark"] #app { background-color: #0f172a !important; } html[data-theme="dark"] .cs_white_bg, html[data-theme="dark"] .bg-white, html[data-theme="dark"] [class*="cs_white"] { background-color: #1e293b !important; } /* ---------- Timetable / Schedule ---------- */ html[data-theme="dark"] .cs_timetable, html[data-theme="dark"] .timetable-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Contact Info boxes ---------- */ html[data-theme="dark"] .cs_contact_card, html[data-theme="dark"] .cs_contact_info_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_contact_card h3, html[data-theme="dark"] .cs_contact_info_card h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_contact_card p, html[data-theme="dark"] .cs_contact_info_card p { color: #94a3b8 !important; } /* ---------- Tenders ---------- */ html[data-theme="dark"] .tender-card, html[data-theme="dark"] .tender-item, html[data-theme="dark"] .cs_tender_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .tender-card h3, html[data-theme="dark"] .cs_tender_card h3 { color: #e2e8f0 !important; } html[data-theme="dark"] .tender-card p, html[data-theme="dark"] .cs_tender_card p { color: #94a3b8 !important; } html[data-theme="dark"] .tender-card .badge, html[data-theme="dark"] .cs_tender_card .badge { background-color: #334155 !important; } /* ---------- Publication pages ---------- */ html[data-theme="dark"] .publication-card, html[data-theme="dark"] .cs_publication_card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .publication-card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.3) !important; } /* ---------- Images in dark mode - subtle brightness reduction ---------- */ html[data-theme="dark"] .cs_post img, html[data-theme="dark"] .cs_blog_details img, html[data-theme="dark"] .cs_about img { filter: brightness(0.92); } /* ---------- Swiper / Slick slider controls ---------- */ html[data-theme="dark"] .swiper-button-next, html[data-theme="dark"] .swiper-button-prev, html[data-theme="dark"] .slick-prev, html[data-theme="dark"] .slick-next { color: #e2e8f0 !important; } html[data-theme="dark"] .swiper-pagination-bullet { background: #475569 !important; } html[data-theme="dark"] .swiper-pagination-bullet-active { background: #60a5fa !important; } /* ---------- Search results page ---------- */ html[data-theme="dark"] .cs_search_results { background-color: #0f172a !important; } html[data-theme="dark"] .cs_search_result_item { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- MHPSS specific pages ---------- */ html[data-theme="dark"] .mhpss-hero { background-color: #162033 !important; } html[data-theme="dark"] .mhpss-section { background-color: #0f172a !important; } html[data-theme="dark"] .mhpss-card { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .mhpss-stat-card { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Survey pages ---------- */ html[data-theme="dark"] .survey-card, html[data-theme="dark"] .survey-question { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .survey-option { background-color: #162033 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .survey-option:hover { background-color: #1e293b !important; border-color: #60a5fa !important; } /* ---------- Login / Auth pages ---------- */ html[data-theme="dark"] .cs_login_wrap, html[data-theme="dark"] .cs_auth_wrap, html[data-theme="dark"] .cs_register_wrap { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Tooltip ---------- */ html[data-theme="dark"] .tooltip-inner { background-color: #334155 !important; color: #e2e8f0 !important; } /* ---------- Loading / Preloader ---------- */ html[data-theme="dark"] .cs_preloader, html[data-theme="dark"] .cs_preloader_wrap { background-color: #0f172a !important; } /* ---------- Copyright ---------- */ html[data-theme="dark"] .cs_copyright { background-color: #070d1a !important; border-top: 1px solid #1e293b !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_copyright p, html[data-theme="dark"] .cs_copyright span, html[data-theme="dark"] .cs_copyright a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_copyright a:hover { color: #93c5fd !important; } /* ---------- Section Headings ---------- */ html[data-theme="dark"] .cs_section_heading { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_section_subtitle, html[data-theme="dark"] .cs_section_subtitle.cs_accent_color { color: #60a5fa !important; } html[data-theme="dark"] .cs_section_title { color: #f1f5f9 !important; } /* ---------- About Section — SVG shapes ---------- */ html[data-theme="dark"] .cs_about.cs_style_2.cs_shape_wrap { background-color: #0f172a !important; } html[data-theme="dark"] .cs_shape_3 svg, html[data-theme="dark"] .cs_shape_wrap svg { opacity: .15 !important; } html[data-theme="dark"] .cs_about_img img { border-radius: 12px; filter: brightness(0.9); } /* ---------- Department Grid (cs_dept1_*) ---------- */ html[data-theme="dark"] .cs_dept1_section { background-color: #0f172a !important; } html[data-theme="dark"] .cs_dept1_grid { color: #e2e8f0; } html[data-theme="dark"] .cs_dept1_card { background-color: #1e293b !important; border: 1px solid #334155 !important; color: #e2e8f0 !important; text-decoration: none !important; } html[data-theme="dark"] .cs_dept1_card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.35) !important; border-color: #475569 !important; } html[data-theme="dark"] .cs_dept1_content { background-color: #1e293b !important; padding: 16px; } html[data-theme="dark"] .cs_dept1_title { color: #e2e8f0 !important; margin: 0; } html[data-theme="dark"] .cs_dept1_image { background-color: #162033 !important; position: relative; overflow: hidden; } html[data-theme="dark"] .cs_dept1_overlay { background: rgba(15, 23, 42, 0.5) !important; } html[data-theme="dark"] .cs_dept1_arrow { color: #fff !important; } html[data-theme="dark"] .cs_dept1_image img { filter: brightness(0.85); width: 100%; height: auto; display: block; } /* ---------- Locations Page ---------- */ html[data-theme="dark"] .cs_locations_content { background-color: #0f172a !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_locations_list { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_locations_search_box { background-color: #162033 !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_locations_search_box input { background-color: #162033 !important; color: #e2e8f0 !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_locations_search_box input::placeholder { color: #64748b !important; } html[data-theme="dark"] .cs_locations_search_box svg { color: #64748b !important; } html[data-theme="dark"] .cs_category_filter { background-color: #1e293b !important; } html[data-theme="dark"] .cs_category_btn { background-color: #162033 !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .cs_category_btn:hover { background-color: #253449 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .cs_category_btn.active { background-color: #2563eb !important; border-color: #2563eb !important; color: #fff !important; } html[data-theme="dark"] .cs_location_card, html[data-theme="dark"] .cs_location_item { background-color: #162033 !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_location_card:hover, html[data-theme="dark"] .cs_location_item:hover { background-color: #1e293b !important; border-color: #475569 !important; } html[data-theme="dark"] .cs_location_card h3, html[data-theme="dark"] .cs_location_item h3 { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_location_card p, html[data-theme="dark"] .cs_location_item p, html[data-theme="dark"] .cs_location_card span, html[data-theme="dark"] .cs_location_item span { color: #94a3b8 !important; } html[data-theme="dark"] .cs_location_card a, html[data-theme="dark"] .cs_location_item a { color: #60a5fa !important; } html[data-theme="dark"] .cs_location_card svg, html[data-theme="dark"] .cs_location_item svg { color: #64748b !important; } /* Map container in locations page */ html[data-theme="dark"] .cs_locations_map { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } html[data-theme="dark"] .cs_locations_map img { filter: invert(100%) hue-rotate(180deg); } /* ========================================================== COMPREHENSIVE SCSS COMPONENT OVERRIDES Based on actual source: shortcode/ and common/ SCSS files ========================================================== */ /* ---------- Iconbox (from _iconbox.scss) ---------- */ html[data-theme="dark"] .cs_iconbox.cs_style_1 { background-color: #1e293b !important; } html[data-theme="dark"] .cs_iconbox.cs_style_2 { border-color: #3b82f6 !important; background-color: transparent !important; } html[data-theme="dark"] .cs_iconbox.cs_style_4, html[data-theme="dark"] .cs_iconbox.cs_style_7 { background: #1e293b !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_5 { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; background-color: #1e293b !important; } html[data-theme="dark"] .cs_iconbox.cs_style_6 { background: #1e293b !important; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_6:hover { background: #253449 !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_6 .cs_iconbox_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_iconbox.cs_style_6 .cs_iconbox_subtitle { color: #94a3b8 !important; } html[data-theme="dark"] .cs_iconbox.cs_style_8:hover { background-color: #1e293b !important; box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_10 { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; background-color: #1e293b !important; } html[data-theme="dark"] .cs_iconbox.cs_style_10:hover { box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_11 { background-color: rgba(22, 32, 51, 0.7) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_12:hover .cs_iconbox_info { background-color: #1e293b !important; box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_13 { background-color: #1e293b !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_13 .cs_iconbox_icon { background-color: #1e293b !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_iconbox_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_iconbox_subtitle, html[data-theme="dark"] .cs_iconbox_text { color: #94a3b8 !important; } /* ---------- Posts (from _post.scss) ---------- */ html[data-theme="dark"] .cs_post.cs_style_1 { background-color: #1e293b !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_post.cs_style_1:hover { box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_post.cs_style_2 { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; background-color: #1e293b !important; } html[data-theme="dark"] .cs_post.cs_style_3:hover { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_post_title, html[data-theme="dark"] .cs_post_title a { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_post_title a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_post_info { color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_info a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_info a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_post_meta { color: #94a3b8 !important; } html[data-theme="dark"] .cs_post_category { border-color: #3b82f6 !important; color: #93c5fd !important; } html[data-theme="dark"] .cs_post_btn { color: #93c5fd !important; } /* ---------- Team (from _team.scss) ---------- */ html[data-theme="dark"] .cs_team.cs_style_1 { background: linear-gradient(154deg, rgba(22, 32, 51, 0.6) 0%, rgba(30, 41, 59, 0.6) 100%) !important; } html[data-theme="dark"] .cs_team.cs_style_1:hover { box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_team.cs_style_1.cs_type_1 { background: #1e293b !important; } html[data-theme="dark"] .cs_team.cs_style_1.cs_type_2 { box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_member_name { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_member_designation { color: #94a3b8 !important; } html[data-theme="dark"] .cs_member_description { color: #cbd5e1 !important; } /* ---------- Testimonials (from _testimonial.scss) ---------- */ html[data-theme="dark"] .cs_testimonial.cs_style_2 .cs_testimonial_text { background-color: #1e293b !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_testimonial.cs_style_3 { background-color: #1e293b !important; } html[data-theme="dark"] .cs_testimonial.cs_style_4 { background-color: #1e293b !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_testimonial_text p { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_testimonial_carousel_2 .swiper { box-shadow: -10px 0px 30px -20px rgba(0, 0, 0, 0.25) !important; } /* ---------- About (from _about.scss) ---------- */ html[data-theme="dark"] .cs_about.cs_style_1 { background-color: #0f172a !important; } html[data-theme="dark"] .cs_about.cs_style_1 .cs_about_img { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_about.cs_style_1 .cs_about_text_list li > h3 { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_about.cs_style_1 .cs_about_text_list li > p { color: #94a3b8 !important; } html[data-theme="dark"] .cs_about.cs_style_2 { background-color: #0f172a !important; background: linear-gradient(135deg, #0f172a 0%, #162033 100%) !important; } html[data-theme="dark"] .cs_about.cs_style_2::before { background: linear-gradient(90deg, rgba(220, 38, 38, 0.8) 0%, #dc2626 50%, rgba(220, 38, 38, 0.8) 100%) !important; } html[data-theme="dark"] .cs_about.cs_style_2 .cs_section_heading.cs_style_1 .cs_section_subtitle { background: linear-gradient(135deg, rgba(220, 38, 38, 0.15) 0%, rgba(220, 38, 38, 0.08) 100%) !important; color: #dc2626 !important; } html[data-theme="dark"] .cs_about.cs_style_2 .cs_section_heading.cs_style_1 .cs_section_title { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_about.cs_style_2 .cs_section_heading.cs_style_1 p { color: #cbd5e1 !important; border-color: rgba(220, 38, 38, 0.5) !important; } html[data-theme="dark"] .cs_about.cs_style_2 .cs_about_img { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_about.cs_style_2 .cs_about_img::before { background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(220, 38, 38, 0.05) 100%) !important; } html[data-theme="dark"] .cs_about.cs_style_3 { background: linear-gradient(135deg, #162033 0%, #1e293b 50%, #162033 100%) !important; } html[data-theme="dark"] .cs_about.cs_style_3::before { background: linear-gradient(119deg, rgba(15, 23, 42, 0.95) 17.16%, rgba(22, 32, 51, 0.95) 89.78%) !important; } html[data-theme="dark"] .cs_about.cs_style_3 .cs_section_heading.cs_style_1 h2 { color: #f1f5f9 !important; text-shadow: none !important; } html[data-theme="dark"] .cs_about.cs_style_3 .cs_section_minititle { color: #94a3b8 !important; } html[data-theme="dark"] .cs_about.cs_style_3 .cs_support_card { background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(30, 41, 59, 0.9) 100%) !important; border-color: #334155 !important; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_about.cs_style_3 .cs_support_card h3 { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_about.cs_style_3 .cs_support_card p { color: #94a3b8 !important; } /* ---------- Department (from _department.scss) ---------- */ html[data-theme="dark"] .cs_departments.cs_style_1 { background-color: #0f172a !important; } html[data-theme="dark"] .cs_department { background: #1e293b !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_department:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_department .cs_department_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_department p { color: #94a3b8 !important; } /* ---------- Fun Fact (from _about.scss & _funfact.scss) ---------- */ html[data-theme="dark"] .cs_fun_fact.cs_style_1 { background: linear-gradient(135deg, #0f172a 0%, #162033 100%) !important; } html[data-theme="dark"] .cs_fun_fact.cs_style_1 .cs_fun_fact_item { background: #1e293b !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_fun_fact.cs_style_1 .cs_fun_fact_item:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_fun_fact.cs_style_1 .cs_fun_fact_item p { color: #94a3b8 !important; } html[data-theme="dark"] .cs_funfact_1_wrap { background-color: #162033 !important; } /* ---------- Award (from _about.scss) ---------- */ html[data-theme="dark"] .cs_award.cs_style_1 .cs_award_item { background: #1e293b !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_award.cs_style_1 .cs_award_item:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; } html[data-theme="dark"] .cs_award.cs_style_1 .cs_award_item h2 { color: #e2e8f0 !important; } /* ---------- Newsletter (from _footer.scss) ---------- */ html[data-theme="dark"] .cs_newsletter_1_wrap::before { background-color: #0f172a !important; } html[data-theme="dark"] .cs_newsletter.cs_style_1 { background: #1e293b !important; box-shadow: 6px 4px 70px 8px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_newsletter.cs_style_1 .cs_newsletter_title { color: #f1f5f9 !important; } /* ---------- Sidebar (from _sidebar.scss) ---------- */ html[data-theme="dark"] .cs_sidebar_item { background-color: #1e293b !important; box-shadow: 0px 6px 31px 0px rgba(0, 0, 0, 0.2) !important; } html[data-theme="dark"] .cs_sidebar_widget_title { color: #f1f5f9 !important; } html[data-theme="dark"] .widget_categories ul { color: #60a5fa !important; } html[data-theme="dark"] .widget_categories ul li a { color: #94a3b8 !important; } html[data-theme="dark"] .widget_categories ul li a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_popular_post_title { color: #60a5fa !important; } html[data-theme="dark"] .cs_popular_post_title a { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_popular_post_title a:hover { color: #93c5fd !important; } html[data-theme="dark"] .cs_popular_post_meta li { color: #64748b !important; } html[data-theme="dark"] .cs_posted_author a { color: #94a3b8 !important; } html[data-theme="dark"] .cs_posted_author a:hover { color: #60a5fa !important; } /* ---------- Hero (from _hero.scss) ---------- */ html[data-theme="dark"] .cs_hero.cs_style_2 .cs_hero_funfact::before { background: rgba(30, 41, 59, 0.3) !important; box-shadow: 0px 0px 0px 1px rgba(51, 65, 81, 0.4) !important; } html[data-theme="dark"] .cs_hero.cs_style_3 .cs_hero_card { background: linear-gradient(163deg, #1e293b 0%, #162033 100%) !important; } /* ---------- Iconbox 8 wrap gradient ---------- */ html[data-theme="dark"] .cs_iconbox_8_wrap { background: linear-gradient(172deg, #162033 0%, #1e293b 100%) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_9 { background: linear-gradient(154deg, #162033 0%, #1e293b 100%) !important; } html[data-theme="dark"] .cs_iconbox.cs_style_7::before { background: linear-gradient(154deg, #162033 0%, #1e293b 100%) !important; } /* ---------- Section Headings ---------- */ html[data-theme="dark"] .cs_section_heading { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_section_heading h2, html[data-theme="dark"] .cs_section_heading h3 { color: #f1f5f9 !important; } html[data-theme="dark"] .cs_section_heading p { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_section_subtitle { color: #60a5fa !important; } html[data-theme="dark"] .cs_section_title { color: #f1f5f9 !important; } /* ---------- Headings / Typography ---------- */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: #f1f5f9 !important; } html[data-theme="dark"] p { color: #cbd5e1; } html[data-theme="dark"] a { color: #93c5fd; } html[data-theme="dark"] a:hover { color: #60a5fa; } /* ---------- Tables ---------- */ html[data-theme="dark"] table, html[data-theme="dark"] .table { color: #e2e8f0; } html[data-theme="dark"] table th, html[data-theme="dark"] .table th { background-color: #1e293b !important; color: #f1f5f9 !important; border-color: #334155 !important; } html[data-theme="dark"] table td, html[data-theme="dark"] .table td { background-color: #0f172a !important; border-color: #1e293b !important; color: #cbd5e1 !important; } html[data-theme="dark"] table tr:hover td { background-color: #162033 !important; } /* ---------- Breadcrumbs ---------- */ html[data-theme="dark"] .breadcrumb-item a { color: #94a3b8 !important; } html[data-theme="dark"] .breadcrumb-item.active { color: #60a5fa !important; } /* ---------- Pagination ---------- */ html[data-theme="dark"] .pagination .page-item .page-link { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } html[data-theme="dark"] .pagination .page-item.active .page-link { background-color: #2563eb !important; color: #fff !important; } /* ---------- Dropdown general ---------- */ html[data-theme="dark"] .dropdown-menu { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0 8px 30px rgba(0,0,0,.4) !important; } html[data-theme="dark"] .dropdown-item { color: #cbd5e1 !important; } html[data-theme="dark"] .dropdown-item:hover { background-color: rgba(96,165,250,.1) !important; color: #93c5fd !important; } /* ---------- Modal ---------- */ html[data-theme="dark"] .modal-content { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .modal-header { border-bottom-color: #334155 !important; } html[data-theme="dark"] .modal-footer { border-top-color: #334155 !important; } /* ---------- Badge ---------- */ html[data-theme="dark"] .badge { background-color: #334155 !important; color: #e2e8f0 !important; } /* ---------- Alert ---------- */ html[data-theme="dark"] .alert { background-color: #162033 !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* ---------- Blog detail ---------- */ html[data-theme="dark"] .cs_blog_details, html[data-theme="dark"] .cs_blog_detail_content { color: #cbd5e1 !important; } html[data-theme="dark"] blockquote { background-color: #162033 !important; border-color: #2563eb !important; color: #cbd5e1 !important; } html[data-theme="dark"] .cs_comment_section { background-color: #1e293b !important; } /* ---------- Scrollbar ---------- */ html[data-theme="dark"] ::-webkit-scrollbar { width: 10px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0f172a; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; border-radius: 5px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #475569; } /* ---------- Search overlay ---------- */ html[data-theme="dark"] .cs_header_search_box, html[data-theme="dark"] .cs_search_wrap { background-color: #1e293b !important; } html[data-theme="dark"] .cs_header_search_box input { background-color: #0f172a !important; color: #e2e8f0 !important; border-color: #334155 !important; } /* ---------- Cookie banner ---------- */ html[data-theme="dark"] .cs_cookie { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; } /* ---------- Video modal ---------- */ html[data-theme="dark"] .cs_video_modal { background-color: rgba(15, 23, 42, 0.95) !important; } /* ---------- Page Heading (from classes in DOM) ---------- */ html[data-theme="dark"] .cs_page_heading.cs_style_1, html[data-theme="dark"] .cs_page_heading.cs_bg_filed { position: relative; } html[data-theme="dark"] .cs_page_heading.cs_style_1::before, html[data-theme="dark"] .cs_page_heading.cs_bg_filed::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.75) !important; z-index: 1; } html[data-theme="dark"] .cs_page_heading .cs_page_heading_in, html[data-theme="dark"] .cs_page_heading .container { position: relative; z-index: 2; } html[data-theme="dark"] .cs_page_heading .cs_page_heading_in h1, html[data-theme="dark"] .cs_page_heading .cs_page_title { color: #f1f5f9 !important; } /* ---------- Images subtle brightness ---------- */ html[data-theme="dark"] .cs_post img, html[data-theme="dark"] .cs_blog_details img, html[data-theme="dark"] .cs_about img { filter: brightness(0.92); } /* ---------- Swiper / Slick controls ---------- */ html[data-theme="dark"] .swiper-button-next, html[data-theme="dark"] .swiper-button-prev, html[data-theme="dark"] .slick-prev, html[data-theme="dark"] .slick-next { color: #e2e8f0 !important; } html[data-theme="dark"] .swiper-pagination-bullet { background: #475569 !important; } html[data-theme="dark"] .swiper-pagination-bullet-active { background: #60a5fa !important; } /* ---------- Tag cloud ---------- */ html[data-theme="dark"] .tagcloud a, html[data-theme="dark"] .cs_tags a { background-color: #162033 !important; border-color: #334155 !important; color: #94a3b8 !important; } html[data-theme="dark"] .tagcloud a:hover, html[data-theme="dark"] .cs_tags a:hover { background-color: #2563eb !important; color: #fff !important; } /* ---------- Pricing card ---------- */ html[data-theme="dark"] .cs_pricing_card { background-color: #1e293b !important; border-color: #334155 !important; box-shadow: 0px 4px 21px 1px rgba(0, 0, 0, 0.25) !important; } html[data-theme="dark"] .cs_pricing_card:hover { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3) !important; } /* ---------- Accordion ---------- */ html[data-theme="dark"] .cs_accordion .cs_accordion_item { background-color: #1e293b !important; border-color: #334155 !important; } html[data-theme="dark"] .cs_accordion_title { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_accordion_body { color: #cbd5e1 !important; border-top-color: #334155 !important; } /* ---------- Partner / Brands ---------- */ html[data-theme="dark"] .cs_brands_wrap { background-color: #162033 !important; } html[data-theme="dark"] .cs_brand img { filter: brightness(0.8) contrast(1.1); } /* ---------- Photo Gallery ---------- */ html[data-theme="dark"] .cs_gallery_item { background-color: #1e293b !important; } /* ---------- Datepicker ---------- */ html[data-theme="dark"] .react-datepicker { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html[data-theme="dark"] .react-datepicker__header { background-color: #162033 !important; border-bottom-color: #334155 !important; } html[data-theme="dark"] .react-datepicker__day { color: #e2e8f0 !important; } html[data-theme="dark"] .react-datepicker__day:hover { background-color: #334155 !important; } html[data-theme="dark"] .react-datepicker__day--selected { background-color: #2563eb !important; } /* ---------- Login / Auth pages ---------- */ html[data-theme="dark"] .cs_login_wrap, html[data-theme="dark"] .cs_auth_wrap, html[data-theme="dark"] .cs_register_wrap { background-color: #1e293b !important; border-color: #334155 !important; } /* ---------- Contact page ---------- */ html[data-theme="dark"] .cs_contact_info { background-color: #1e293b !important; } /* ---------- Working progress ---------- */ html[data-theme="dark"] .cs_progress_bar, html[data-theme="dark"] .progress { background-color: #1e293b !important; } /* ---------- Preloader ---------- */ html[data-theme="dark"] .cs_preloader, html[data-theme="dark"] .cs_preloader_wrap { background-color: #0f172a !important; } /* ---------- Back to top ---------- */ html[data-theme="dark"] .cs_scrollup { background-color: #2563eb !important; } /* ---------- Tooltip ---------- */ html[data-theme="dark"] .tooltip-inner { background-color: #334155 !important; color: #e2e8f0 !important; } /* ---------- Google Maps / Embedded ---------- */ html[data-theme="dark"] .gm-style, html[data-theme="dark"] [style*="touch-action: pan-x pan-y"] { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } html[data-theme="dark"] .gm-style img { filter: invert(100%) hue-rotate(180deg); } html[data-theme="dark"] iframe[src*="google.com/maps"], html[data-theme="dark"] iframe[src*="maps.google"] { filter: invert(90%) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* ---------- Misc text overrides ---------- */ html[data-theme="dark"] .cs_text_btn:hover { color: #e2e8f0 !important; } html[data-theme="dark"] .cs_text_btn_2 { color: #cbd5e1 !important; } html[data-theme="dark"] .cs_rating svg { color: #f59e0b !important; } html[data-theme="dark"] .cs_social_links a { color: #cbd5e1 !important; } /* ---------- Container banner image brightness ---------- */ html[data-theme="dark"] .container-fluid img { opacity: .85; } /* ---------- Dark mode toggle button ---------- */ .doh_darkmode_toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: #fff; cursor: pointer; transition: all .25s; font-size: 15px; padding: 0; flex-shrink: 0; } .doh_darkmode_toggle:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.35); transform: rotate(20deg); } .doh_darkmode_toggle svg { width: 16px; height: 16px; } /* ========================================================== JSX INLINE STYLE & COMPONENT CSS OVERRIDES From actual component source: Department.jsx, Department7.jsx, DepartmentMap.jsx, DepartmentContact.jsx, DepartmentContent.jsx, emergency.css, tender.css, slider.css, Surveys, Timetables, MHPSS ========================================================== */ /* ---------- Department.jsx inline