body {
   transition: background-color 0.5s ease;
}

.light-mode {
   background-color: #ffffff;
   color: #000000;
}
.navbar{
   background: rgb(0, 0, 0);
}
.dark-mode {
   background-color: #ffffff;
   color: #000000;
}


.dark-mode.light-mode
.text-normal .nav-link {
    color: #000000;
 }
 .dark-mode .fa-play {
    color: #f7f7f7;
 }
body.light-mode .logo {
    display: none;
 }
body.light-mode .logo.d-none {
    display:  inline-block !important;
 }
.toggle-container {
   position: fixed;
   top: 20px;
   right: 20px;
}

.mode-toggle {
   display: none;
}

.toggle-label {
   width: 40px;
   height: 20px;
   background-color: #ccc;
   display: block;
   position: relative;
   cursor: pointer;
   border-radius: 20px;
}

.toggle-label:before {
   content: '';
   width: 20px;
   height: 20px;
   background-color: #fff;
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 50%;
   transition: transform 0.3s ease;
}

.mode-toggle:checked + .toggle-label {
   background-color: #4caf50;
}

.mode-toggle:checked + .toggle-label:before {
   transform: translateX(20px);
}
@media (max-width: 768px) {
    .toggle-container {
        top: 8px ;
        right: 12px;
    }
    body.light-mode .logo {
        display: block !important;
    }
    body.light-mode .logo.d-none {
        display: none!important;
    }
    .light-mode .navbar {
        background: #000;
    }
}

body.dark-mode {
    background-color: #000000;
    color: #fff;
}

body.light-mode {
    background-color: #fff;
    color: #333;
}