/* Theme Switcher Styles */
    .theme-toggle {
      position: fixed;
      top: 100px;
      right: 20px;
      z-index: 1000;
    }

    .theme-toggle-btn {
      position: fixed;
      top: 200px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60px;
      height: 30px;
      background: #333;
      border-radius: 50px;
      padding: 5px;
      cursor: pointer;
      border: none;
      outline: none;
      z-index: 1000;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .theme-switch {
      display: none;
    }

    .theme-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 60px;
      height: 30px;
      background: #333;
      border-radius: 50px;
      padding: 5px;
      position: relative;
      cursor: pointer;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .theme-label i {
      font-size: 16px;
      color: #fff;
    }

    .theme-label .fa-moon {
      color: #f1c40f;
    }

    .theme-label .fa-sun {
      color: #f39c12;
    }

    .theme-ball {
      position: absolute;
      width: 22px;
      height: 22px;
      background: #fff;
      border-radius: 50%;
      top: 4px;
      left: 4px;
      transition: transform 0.3s ease;
    }

    .theme-switch:checked + .theme-label .theme-ball {
      transform: translateX(30px);
    }

    .theme-toggle-btn i {
      font-size: 16px;
      color: #fff;
      z-index: 1;
    }
    
    .theme-toggle-btn .fa-moon {
      color: #f1c40f;
    }
    
    .theme-toggle-btn .fa-sun {
      color: #f39c12;
    }
    
    .theme-ball {
      position: absolute;
      width: 22px;
      height: 22px;
      background: #fff;
      border-radius: 50%;
      top: 4px;
      left: 4px;
      transition: transform 0.3s ease;
      z-index: 2;
    }
    
    #theme-switch:checked ~ .theme-toggle-btn .theme-ball {
      transform: translateX(30px);
    }
    
    /* Hide the actual checkbox */
    #theme-switch {
      display: none;
    }

    /* Dark Theme Styles */
    body.dark-theme {
      background-color: #000;
      color: #ffffff;
    }


    body.dark-theme nav {
      background: #000000b3;
    }




 

    body.dark-theme footer {
      background-color: #121212;
    }

    body.dark-theme .footer-section p,
    body.dark-theme .footer-section ul li a {
      color: #cccccc;
    }







/*   other switcher*/

body.dark-theme .hero-section .service-details{
  background: #000;
}

body.dark-theme .hero-section .service-details .feature-card{
  background: #000;
}

body.dark-theme .hero-section .service-details .feature-card{
  background: #0e7c77;
  border-left: 4px solid #ffd13a;
}


body.dark-theme .hero-section .service-details .feature-card h3{
  color: #fff;
}

body.dark-theme .hero-section .service-details .feature-card i  {
  color: #ffd13a;
}

body.dark-theme .hero-section   h2{
  color: #fff;
}


body.dark-theme h2::after{
  background: linear-gradient(90deg, #fdc304, #ffd13a);
}

body.dark-theme .pricing-card{
  background: #222;
}

body.dark-theme .pricing-card.popular{

/*   border: 1px solid #fdc304;*/
}

body.dark-theme .pricing-card .price{
  color: #fdc304;
}

body.dark-theme .pricing-card .price span{
  color: #fff;
}

body.dark-theme .pricing-card .btn , body.dark-theme .pricing-card .popular-tag{
 /* background: #fdc304;
  color: #000;*/
}

/*body.dark-theme .process-steps .step-number{
  color:#000 ;
  background: linear-gradient(135deg, #fdc304, #ffd13a);
}*/

/*body.dark-theme .process-steps::before {
            background: linear-gradient(to bottom, #fdc304, #ffd13a);
        }*/

body.dark-theme .pricing-card h3{
  color: white;

}



body.dark-theme .pricing-card li{
  color: white;
}

body.dark-theme .faq-question{
  background:#111;
  color: #fff;
}



body.dark-theme .footer-section h3{
  color:#fdc304 ;
}

body.dark-theme footer ul li a:hover{
 color:#fdc304 ;
}

body.dark-theme footer .social-icons a:hover{
 color:#fdc304 ;
}

body.dark-theme .footer-section .p1:hover , body.dark-theme .footer-section .p:hover{
      color: #fdc304;
    }
    body.dark-theme .header .main-content h1{
        color: #ffd13a;
    }