:root {
  --bg-color: #ffffff;    /* white background */
  --text-color: #000000;  /* black text */
  --text2-color: #000000;  /* black text */
  --text3-color: #fff;  /* black text */
  --second-color: #F9FBFC;
  --third-color: #fff;
  --forth-color: #d01818;
  --toggle-bg: #e4e4e4;
  --toggle-btn: linear-gradient(145deg, #f7b733, #fc4a1a);
  --sun-color: #fff;
  --moon-color: #999;
  --fifth-color: #f5f6f7;
  --sixth-color: #053361;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-color: #121212;    /* very dark gray */
  --text-color: #f5f5f5;  /* light gray text */
  --text2-color: #000000;  /* light gray text */
  --text3-color: #fff;  /* light gray text */
  --second-color: #242424;
  --third-color: #d01818;
  --forth-color: #fff;
  --toggle-bg: #555;
  --toggle-btn: linear-gradient(145deg, #555, #0c0c0c);
  --sun-color: #f7b733;
  --moon-color: #fff;
  --fifth-color: #242424;
  --sixth-color: #fff;
}

/* ===== Toggle Switch ===== */
.toggle-switch2 {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--toggle-bg);
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
}

.toggle-switch2 .icon {
  font-size: 14px;
  transition: opacity 0.3s ease;
}

.toggle-btn2 {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--toggle-btn);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: left 0.3s ease, background 0.3s ease;
}

[data-theme="dark"] .toggle-btn2 {
  left: 33px;
}

.icon.sun {
  color: var(--sun-color);
  z-index: 2;
}

.icon.moon {
  color: var(--moon-color);
  z-index: 2;
}




body {
  background-color: var(--bg-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease !important;
}
.boxcar-title h2{
    color: var(--text-color) !important;
}
.boxcar-title.light .text, .boxcar-title.light h2, .boxcar-title.light h1{
    color: var(--text3-color) !important;
}
.cars-block-five .content-box h6.title a{
    color: var(--text-color) !important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
    color: var(--text2-color) !important;
}
.why-choose-us-section h6 a{
    color: var(--text3-color) !important;
}
.car-slider-two h6 a{
    color: var(--text3-color) !important;
}
.cars-section-ten .right-box{
    background-color: var(--second-color);
}
.boxcar-fun-fact-section-two p, .boxcar-fun-fact-section-two .text {
    color: var(--text2-color) !important;
}
.boxcar-testimonial-section-four .text {
    color: var(--text2-color) !important;
}
.bg-white {
    background-color: var(--bg-color) !important;
}

h6 {
    color: var(--text-color) !important;
}
.testimonial-block-four h6, .testimonial-block-four .inner-box .auther-info span{
    color: var(--text2-color) !important;
}
h2.entry-title a{
    color: var(--text-color) !important;
}

.listing-grid-item .listing-item-content p {
    color: var(--text2-color) !important;
}
.tf-pagination .page-numbers{
    color: var(--text-color) !important;
}
.toggle-text{
    color: var(--text-color) !important;
}
.slick-prev, .slick-next{
    color: var(--forth-color) !important;
    background: var(--third-color) !important;
    border: 1px solid var(--forth-color) !important;
}
.slick-prev:before, .slick-next:before{
    color: var(--forth-color) !important;
}

.search-form-widget .tab-content{
    background-color: var(--second-color) !important;
}
.choose-us-block .inner-box .icon-box {
    border-radius: 14px 14px 0 0;
}

.car-block-ten .inner-box .image-box{
    padding: 0 0 !important;
}


.result-container {
    background: var(--fifth-color) !important;
}
.compare-result {
    background: var(--fifth-color) !important;
    color: var(--text-color) !important;
}
.compare-result b {
    color: var(--text-color) !important;
}
.result-container h4 {
    color: var(--text-color) !important;
}

.title-bar-wrapper.title-bg {
    background: var(--fifth-color) !important;
}
.title-head-1{
    color: var(--sixth-color) !important;
}
.title-divs .title-sub-haed{
    color: var(--text-color) !important;
}

.mobile-menu .menu-box{
    background-color: var(--bg-color) !important;
}
.mobile-menu .navigation li > a{
    color: var(--text-color) !important;
}
.mobile-menu .menu-box a{
    color: var(--text-color) !important;
}
section.boxcar-fun-fact-section-two.why-choose-us-section .boxcar-title h2{
    color: var(--text3-color) !important;
}