.btn {
  position: relative;
  display: inline-block;
  border: 1px solid transparent;
  border-radius: 50px;
  padding: 1rem 1.5rem;
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  white-space: nowrap;
  transition: 0.3s;
}

.btn:disabled {
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

.btn:hover {
  cursor: pointer;
}

.btn:has(img),
.btn:has(iconify-icon),
.btn:has(svg) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.btn img,
.btn svg {
  height: 18px;
  -o-object-fit: contain;
  object-fit: contain;
  flex-shrink: 0;
}

.btn iconify-icon {
  font-size: 17px;
}

.btn-primary {
  color: #FFF;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-primary:hover,
.btn-primary.active {
  color: var(--color-primary);
  background: var(--border-primary);
}

.btn-secondary {
  color: var(--black);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.btn-secondary:hover,
.btn-secondary.active {
  color: var(--black);
  opacity: 0.7;
}

.btn-outline {
  color: var(--color-primary);
  background: var(--border-primary);
  border-color: var(--color-primary);
}

.btn-outline:hover,
.btn-outline.active {
  color: #FFF;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.btn-white {
  color: var(--black);
  border-radius: 65px;
  background: var(--white);
  padding: 12px 16px;
}

.btn-white:hover,
.btn-white.active {
  opacity: 0.7;
}

.btn--md {
  padding: 12px 20px;
}

.btn--squared {
  border-radius: 10px;
}

.btn--count {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  padding-bottom: 3px;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  aspect-ratio: 1/1;
  border-radius: 5px;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}

.select {
  position: relative;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.select select {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-secondary);
  padding: 10px 12px;
  min-height: 40px;
  height: 100%;
  width: 100%;
  min-width: 170px;
}

.select select option {
  padding: 4px 8px;
  color: var(--black);
  background-color: var(--white);
  border: 1px solid var(--white);
}

textarea {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  border-radius: 10px;
  background: var(--bg-secondary);
  padding: 10px 12px;
  min-height: 40px;
  width: 100%;
  resize: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input {
  position: relative;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.input input {
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  border-radius: 10px;
  background: var(--bg-secondary);
  padding: 10px 12px;
  min-height: 40px;
  width: 100%;
}

.input-icon {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 24px;
}

.input-icon.left {
  left: 8px;
}

.input-icon.right {
  right: 8px;
}

.input:has(.input-icon.left) input {
  padding-left: calc(24px + 12px);
}

.input:has(.input-icon.right) input {
  padding-right: calc(24px + 12px);
}

.btn-circle {
  padding: 7px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}

.btn-circle>* {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.btn-transparent {
  background: none;
  border-color: transparent;
}

.btn-language {
  color: var(--color-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding-top: 10px;
  padding-bottom: 10px;
  color: var(--color-primary);
  background: transparent;
  border-color: var(--color-primary);
}

.btn-language:hover,
.btn-language.active {
  color: var(--white);
  border-color: var(--color-primary);
}

@media(max-width: 991px) {

  .btn-language:hover,
  .btn-language.active {
    color: #FFF;
  }
}

.section__title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  overflow: hidden;
}

.section__title.mb {
  margin-bottom: 1.5rem;
}

.section__title h2 {
  color: var(--black);
  font-size: 1.875rem;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  padding-bottom: 2.5px;
}

.section__title span {
  color: var(--color-primary);
}

.section__title p {
  color: var(--black);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  min-width: 30px;
  min-height: 30px;
  flex-shrink: 0;
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  border-radius: 65px;
  color: #FFF;
  background-color: var(--color-primary);
}

.badge-primary {
  color: #FFF;
  background-color: var(--color-primary);
}

.badge-secondary {
  color: #000;
  background-color: #fff;
}

.badge-danger {
  color: #FFF;
  background-color: var(--color-danger);
}

.badge-white {
  color: var(--black);
  background-color: var(--white);
}

.badge--sm {
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  padding: 2px;
  min-width: 20px;
  min-height: 20px;
}

.badge--circle {
  border-radius: 50%;
}

.badge--alert {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-40%, -40%);
}

.card {
  position: relative;
  background-color: var(--bg-secondary);
  padding: 2rem 1.5rem;
  border-radius: 30px;
}

.card h2 {
  color: var(--white);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.card p {
  color: var(--white);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 1rem;
}

.card h2:first-child {
  margin-top: 0;
}

.card h2:last-child,
.card p:last-child {
  margin-bottom: 0;
}

.card--info {
  border-top-left-radius: 0;
}

.card--info::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='35' height='36' viewBox='0 0 35 36' fill='none'%3E%3Cpath d='M17.4998 25.0496C17.913 25.0496 18.2596 24.9096 18.5396 24.6296C18.8196 24.3496 18.9591 24.0035 18.9582 23.5912V17.7579C18.9582 17.3447 18.8182 16.9986 18.5382 16.7196C18.2582 16.4405 17.9121 16.3005 17.4998 16.2996C17.0876 16.2986 16.7415 16.4386 16.4615 16.7196C16.1815 17.0005 16.0415 17.3466 16.0415 17.7579V23.5912C16.0415 24.0044 16.1815 24.351 16.4615 24.631C16.7415 24.911 17.0876 25.0505 17.4998 25.0496ZM17.4998 13.3829C17.913 13.3829 18.2596 13.2429 18.5396 12.9629C18.8196 12.6829 18.9591 12.3368 18.9582 11.9246C18.9572 11.5123 18.8172 11.1662 18.5382 10.8862C18.2591 10.6062 17.913 10.4662 17.4998 10.4662C17.0866 10.4662 16.7405 10.6062 16.4615 10.8862C16.1825 11.1662 16.0425 11.5123 16.0415 11.9246C16.0405 12.3368 16.1805 12.6834 16.4615 12.9644C16.7425 13.2453 17.0886 13.3848 17.4998 13.3829ZM17.4998 32.3412C15.4825 32.3412 13.5866 31.9582 11.8123 31.1921C10.038 30.4259 8.49463 29.3871 7.18213 28.0756C5.86963 26.7641 4.83081 25.2207 4.06567 23.4454C3.30053 21.6701 2.91748 19.7743 2.91651 17.7579C2.91553 15.7415 3.29859 13.8457 4.06567 12.0704C4.83276 10.2951 5.87158 8.75171 7.18213 7.44019C8.49269 6.12866 10.0361 5.08984 11.8123 4.32373C13.5886 3.55762 15.4844 3.17456 17.4998 3.17456C19.5153 3.17456 21.4111 3.55762 23.1873 4.32373C24.9636 5.08984 26.507 6.12866 27.8176 7.44019C29.1281 8.75171 30.1674 10.2951 30.9355 12.0704C31.7035 13.8457 32.0861 15.7415 32.0832 17.7579C32.0803 19.7743 31.6972 21.6701 30.934 23.4454C30.1708 25.2207 29.132 26.7641 27.8176 28.0756C26.5031 29.3871 24.9597 30.4264 23.1873 31.1935C21.415 31.9606 19.5191 32.3432 17.4998 32.3412Z' fill='%233273F6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.card--primary {
  background-color: var(--color-primary);
}

.card--border {
  border: 1px solid var(--border-primary);
}

.form__flex {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form__justify {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

@media(max-width: 991px) {
  .form__flex {
    flex-wrap: wrap;
  }

  .form__flex>* {
    width: 100%;
  }

  .form__justify {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
  }
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}