* {
  --package-text-color: #848199;
}

.packages-header {
  h2 {
    font-size: 1.875rem;
    margin-bottom: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-family: 'Montserrat-Bold', sans-serif;
  }

  p {
    font-size: 0.875rem;
  }
}

.packages-wrapper {
  text-align: center;
  color: var(--package-text-color);
}

.packages-list {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.package-card {
  border-radius: 30px;
  padding: 2.5rem 2.1rem;
  width: 270px;
}

.package-card>.liquidGlass-tint {
  opacity: 0.2;
}

.package-card:hover>.liquidGlass-tint {
  opacity: 1;
  background: linear-gradient(75deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 90%);
}

.pre-price {
  font-size: 0.625rem;
  color: var(--package-text-color);
  text-align: left;
  margin: 0;
}

.price {
  font-family: 'Montserrat-Bold', sans-serif;
  font-size: 2.25rem;
  width: 100%;
  display: block;
  text-align: left;
  line-height: 1;

  em {
    font-family: 'Montserrat-Regular', sans-serif;
    font-size: 1rem;
    color: var(--package-text-color);
    font-style: normal;
  }
}

.package-title {
  margin: 20px 0;
  font-size: 1.75rem;
  font-family: 'Montserrat-Bold', sans-serif;
  text-align: left;
}

.package-content {
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1;

    &::before {
      content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z' fill='%237751A1' fill-opacity='0.2'/><path d='M15.7722 6.83337L10.068 14.5742C9.93197 14.7547 9.72912 14.873 9.50503 14.9024C9.28094 14.9319 9.05441 14.8701 8.87634 14.7309L4.80301 11.4742C4.44356 11.1866 4.38536 10.662 4.67301 10.3025C4.96066 9.94309 5.48523 9.88489 5.84468 10.1725L9.24134 12.89L14.4305 5.84754C14.6007 5.5922 14.8974 5.45103 15.2029 5.48007C15.5083 5.50912 15.7731 5.70368 15.8921 5.98652C16.0111 6.26935 15.965 6.59469 15.7722 6.83337Z' fill='%237651A1'/></svg>");
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }

  p,
  li {
    text-align: left;
    color: var(--package-text-color);
    font-size: 1rem;
  }
}

.package-card.recommended {
  background: linear-gradient(220deg, #00AFFF 23%, #7751A1 76.49%);

  .pre-price {
    color: var(--main-white);
  }

  .price {

    em {
      color: var(--main-white)
    }
  }

  .package-content {
    li {
      &::before {
        content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z' fill='white' fill-opacity='0.4'/><path d='M15.7722 6.83337L10.068 14.5742C9.93197 14.7547 9.72912 14.873 9.50503 14.9024C9.28094 14.9319 9.05441 14.8701 8.87634 14.7309L4.80301 11.4742C4.44356 11.1866 4.38536 10.662 4.67301 10.3025C4.96066 9.94309 5.48523 9.88489 5.84468 10.1725L9.24134 12.89L14.4305 5.84754C14.6007 5.5922 14.8974 5.45103 15.2029 5.48007C15.5083 5.50912 15.7731 5.70368 15.8921 5.98652C16.0111 6.26935 15.965 6.59469 15.7722 6.83337Z' fill='%237651A1'/></svg>");
      }
    }

    p,
    li {
      color: var(--main-white);
    }
  }

  .liquidGlass-shine {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgb(123 123 123 / 70%));
  }
}

.choose-plan {
  margin-top: 50px;

  .liquidGlass-text {
    padding: 0.8rem 2rem;
  }

  .liquidGlass-effect {
    backdrop-filter: blur(6px);
  }
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2rem 0;
}

.switch {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 50px;
  border-radius: 25px;
  overflow: hidden;
  cursor: pointer;

  .switch-border {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    border-radius: inherit;
    padding: 2px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgb(33 33 33 / 70%));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}

.switch input {
  display: none;
}

.slider {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-sizing: border-box;
}

.slider:before {
  content: "";
  position: absolute;
  top: 0px;
  left: 0px;
  width: 107px;
  height: 50px;
  background: #0083BF;
  border-radius: 25px;
  transition: transform 0.3s ease;
  z-index: 1;
}

.slider .option {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: color 0.3s ease;
}

input:checked+.slider:before {
  transform: translateX(107px);
}