/* Center container styling */
.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}

/* Switch container styling */
.center-container .c-switch {
  display: inline-flex;
  position: relative;
  padding: 5px 10px;
  border-radius: 100px; /* Rounded corners */
  background: #F3F5F7; /* Updated background color */
  justify-content: center;
  align-items: center;
  font-family: 'Quicksand', sans-serif; /* Ensure Quicksand font */
}

/* Highlight bar styling for active state */
.center-container .c-switch__highlight {
  position: absolute;
  top: 5px; /* Adjust this based on the height of the container */
  height: calc(100% - 10px); /* Centers the highlight vertically */
  left: 0;
  background: #FFFFFF;
  border: 1px solid #E7EAEC;
  border-radius: 100px;
  transition: transform 0.3s ease, width 0.3s ease;
}

/* Button styling */
.center-container .c-switch button {
  position: relative;
  padding: 0.5em 1.5em;
  text-align: center;
  font-family: 'Quicksand', sans-serif; /* Set font to Quicksand */
  font-weight: 600; /* Medium weight */
  font-size: 15px; /* Font size 16px */
  background: none;
  border-radius: 100px; /* Full rounded corners */
  border: 0;
  outline: none;
  cursor: pointer;
  color: #000; /* Default text color */
  transition: color 0.3s ease;
}

/* Active button state styling */
.center-container .c-switch button.is-active {
  background: #FFFFFF; /* Active background color */
  color: #000; /* Active text color */
  border: 1px solid #E7EAEC; /* Border for active state */
}

/* Icon styling within the button */
.center-container .c-switch img {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}