.switch {
  position: relative;
  display: inline-block;
  width: 28px; 
  height: 16px; 
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 20px;
}

/* The sliding circle */
.slider:before {
  position: absolute;
  content: "";
  height: 12px; 
  width: 12px;  
  left: 2px;      
  bottom: 2px;    
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #28a745; 
}

/* Sliding distance adjustment */
input:checked + .slider:before {
  transform: translateX(12px); /* Decreased from 18px */
}
/* The container that hides the text until it enters the view */
.marquee-wrapper {
width: 100%;
    overflow: hidden;
    background: #f8f9fa;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    padding: -1px !important;
    padding-top: 10px;
}

/* The element that actually moves */
.marquee-text {
    display: inline-block;
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    padding-left: 100%;   /* Starts the text from the far right */
    animation: marquee-scroll 25s linear infinite; /* Adjust '25s' for speed */
}

/* Add spacing between your different marquee items */
.marquee-text span {
    display: inline-block;
    padding-right: -9px; /* Space between each item from your list */
    font-weight: bold;
    color: #333;
}

/* The Movement Logic */
@keyframes marquee-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* Optional: Pause the scrolling when a user hovers over it */
.marquee-wrapper:hover .marquee-text {
    animation-play-state: paused;
    cursor: pointer;
}.separator {
    margin: 0 20px;
    color: #ddd;
}