.price-bg {
}
.price-global {
  padding: 120px 32px 84px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.price-global > .base-title .base-title-box {
  align-items: end;
}

.price-content {
  margin-top: 32px;
}
.price-list {
  margin: 0 auto;
  gap: 26px;
}
.price-item {
  margin: 14px 0;
  background-color: #ffffff66;
  display: flex;
  flex-direction: column;
  border: 2px solid #eaecf0;
  gap: 32px;
  border-radius: 30px;
  border-width: 2px;
  padding: 24px;
  flex: 1;
  justify-content: space-between;
}
.price-item-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.price-item-title {
  font-family: "Roboto";
  font-weight: 600;
  font-size: var(--text-size-5);
  line-height: 32px;
}
.price-item-desc {
  font-family: "Roboto";
  font-weight: 500;
  font-size: var(--text-size-2);
  line-height: 32px;
  color: #667085;
}
.price-item-number {
  font-family: "Roboto";
  font-weight: 500;
  font-size: 44px;
  line-height: 48px;
  background: linear-gradient(98.36deg, #00d9ff -41.38%, #0066ff 59.87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.price-item-currency {
  font-size: var(--text-size-5);
}
.price-item-month {
  font-family: "Roboto";
  font-size: var(--text-size-1);
  text-align: center;
  color: #98a2b3;
}
.price-hr {
  width: 100%;
  border: 1px solid #eaecf0;
}
.price-item-feature {
  font-family: "Roboto";
  font-weight: 500;
  font-size: var(--text-size-2);
  color: #1e2131;
}
.price-item-feature-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.price-item-feature-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.price-item-feature-icon i {
  background: linear-gradient(98.36deg, #00d9ff -41.38%, #0066ff 59.87%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.price-item-feature-text {
  font-family: "Roboto";
  font-weight: 500;
  font-size: var(--text-size-2);
  line-height: 32px;
  color: #667085;
}
.price-item-btn {
  border: 1px solid #1570ef;
  display: flex;
  justify-content: center;
  border-radius: 8px;
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}
.price-item-btn a {
  display: block;
  text-align: center;
}
.price-item-btn:hover {
  background-color: #1570ef;
  box-shadow: 6px 12px 60px 0px #1570ef;
}
.price-item-btn:hover a span {
  color: #fff !important;
}
.price-item-tag-text {
  color: #1570ef;
  font-size: 16px;
  line-height: 24px;
}
.price-item-header-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.price-item-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 100px;
  border: 2px solid #ffffff;
  padding: 12px 18px;
  background: linear-gradient(94.06deg, #f4f8ff 0%, #d8e8ff 100.98%);
}
.price-item-tag i {
  background-color: #1570ef;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.price-item-feature-desc {
  background-color: #f2f4f7;
  border-radius: 8px;
  padding: 8px 12px;
  color: #1570ef;
  font-family: "Roboto";
  font-weight: 500;
  font-size: var(--text-size-2);
}
.price-item.active {
  margin: 0;
  background-color: #fff;
  border: 1px solid #1570ef;
}
.price-item.active > .price-item-btn {
  background-color: #1570ef;
  box-shadow: 6px 12px 60px 0px #1570ef;
}
.price-item.active > .price-item-btn a span {
  color: #fff !important;
}

@media (min-width: 769px) and (max-width: 991px) {
  .price-btn{
   display: flex;
   justify-content: center;
  }
  .price-list{
    flex-direction: column;
  } 
  .price-list .price-item{
    width: 100%;
  }
}

@media (max-width: 768px) {
  .price-global {
    padding: 33px 0 48px 0;
  }
  .price-content {
    margin-top: 24px;
  }
  .price-list {
    flex-direction: column;
    gap: 18px;
    margin-bottom: 24px;
  }
  .price-item {
    margin: 0;
    gap: 18px;
    width: 100%;
  }
  .price-item-header {
    gap: 8px;
  }
  .price-item-title {
    font-size: var(--text-size-4);
  }
  .price-item-desc {
    font-size: var(--text-size-1);
  }
  .price-item-number {
    font-size: 38px;
  }
  .price-item-month {
    font-size: 12px;
  }
  .price-item-feature {
    font-size: 16px;
  }
  .price-item-feature-text {
    font-size: 16px;
  }
  .price-item-tag-text {
    font-size: 12px;
  }
  .price-item-feature-desc {
    font-size: 16px;
  }
  .price-btn {
    display: block;
    margin: 0 36px;
  }
  .price-btn a {
    justify-content: center;
  }
}