/* start language toggle */

.lang-toggle {
  position: relative;

  width: 80px;
  height: 40px;

  background: #2563eb;

  border-radius: 999px;

  display: flex;
  align-items: center;

  padding: 6px;

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  border: 1px solid rgba(255, 255, 255, 0.12);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);

  overflow: hidden;
}

.lang-toggle:hover {
  background: #1d4ed8;
}

/* Sliding Circle */

.lang-toggle-slider {
  position: absolute;

  width: 30px;
  height: 30px;

  left: 7px;
  top: px;

  border-radius: 50%;

  background: linear-gradient(135deg, #f59e0b, #f97316);

  box-shadow: 0 8px 18px rgba(25, 0, 124, 0.35);

  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Move slider */

.lang-toggle.bn-active .lang-toggle-slider {
  left: calc(100% - 38px);

  background: linear-gradient(135deg, #f59e0b, #f97316);

  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.35);
}

/* Buttons */

.lang-option {
  position: relative;
  z-index: 2;

  flex: 1;

  height: 100%;

  border: none;
  background: transparent;

  color: #cbd5e1;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  transition: 0.3s ease;
}

.lang-option.active {
  color: white;
}

/* Hover */

.lang-option:hover {
  color: white;
}

/* Mobile */
@media (max-width: 768px) {
  .lang-toggle {
    width: 104px;
    height: 48px;
  }

  .lang-toggle-slider {
    width: 38px;
    height: 38px;
  }

  .lang-toggle.bn-active .lang-toggle-slider {
    left: calc(100% - 43px);
  }

  .lang-option {
    font-size: 13px;
  }
}
/* end language toggle */