.elementor-15 .elementor-element.elementor-element-fcce22c{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-fa59229{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-b08fedf{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-e5c5087{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-36e93aa{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-1bf6f00{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-15 .elementor-element.elementor-element-fd2070e{--display:flex;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-15 .elementor-element.elementor-element-1bf6f00{--width:100%;}}/* Start custom CSS */
Dark Mode CSS for All Sections
Copy the CSS above and add it to your main stylesheet. It covers:
- ✅ Services Section
- ✅ About Section
- ✅ Certifications
- ✅ Pricing Section
- ✅ Contact Section
- ✅ CTA Section
- ✅ Footer
- ✅ All forms and inputs
- ✅ All cards and boxes
- ✅ All universal elements
How to implement:
- Copy all the CSS from the style tag above
- Add it to your main stylesheet or in a <style> tag in your page header
- Make sure the dark mode toggle JavaScript is included (which you already have)
- All sections will automatically switch to dark mode when toggled
Color Scheme Used:
- Backgrounds: #1a1a1a (darkest), #2a2a2a (cards), #333 (lighter elements)
- Text: #e0e0e0 (main), #b0b0b0 (subtitles), #999 (muted)
- Accent: #4CAF50 (green - pops nicely against dark)
- Hover states: Adjusted shadows and opacity for dark backgrounds
/* End custom CSS */