.plans {
  margin: 64px 0;
}
.plans .cost-effective {
  border: 1px solid #e4e7ec;
}
.plans .cost-effective .the-card {
  padding: 2rem;
}
.plans .cost-effective .the-card .title {
  font-size: 33px;
  color: #101828;
  font-family: "inter-bold";
}
.plans .cost-effective .the-card .sub-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.plans .cost-effective .the-card .sub-title label {
  cursor: pointer;
  font-size: 14px;
  color: #344054;
  font-family: "inter-bold";
}
.plans .cost-effective .the-card .desc {
  font-size: 14px;
  color: #475467;
}
.plans .cost-effective .the-card .orders {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 2%;
}
.plans .cost-effective .the-card .orders .prices {
  width: 40%;
}
.plans .cost-effective .the-card .orders .desc {
  width: 58%;
}
.plans .cost-effective .the-card .orders .prices p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: #475467;
}
.plans .cost-effective hr {
  border-color: #b3b3b3;
}
.plans .cost-effective .range {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.plans .cost-effective .range .the-range,
.plans .cost-effective .range .ai-listing-range {
  border: none;
  width: 50%;
  padding: 0;
}
.plans .cost-effective .range > input {
  width: 6rem;
  border: 1px solid #d5d7da;
  height: 3rem;
  border-radius: 8px;
  outline: none;
  text-align: center;
  padding: 0.5rem;
}
.plans .basic-card {
  padding: 2rem;
  border: 1px solid #5eb9c3;
  margin-bottom: 1rem;
  background: linear-gradient(to bottom, #e2fcff, #fff);
}
.plans .basic-card .header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.plans .basic-card .header .price .title {
  font-size: 20px;
  font-family: "inter-bold";
  margin-bottom: 0.3rem;
}
.plans .basic-card .header .price #total-price-2,
#plan-name {
  font-family: "inter-bold";
}
.plans .basic-card .header .price .title .small {
  font-size: 14px;
}
.plans #premium-setup-summary {
  display: none;
}
.plans .basic-card .header .price .title .gray {
  color: rgb(179, 179, 179);
}
.plans .basic-card .header .price .desc {
  font-size: 13px;
  color: #475467;
}
.plans .basic-card .body {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}
.plans .basic-card .body > div {
  width: 50%;
}
.plans .basic-card .body ul {
  padding: 0;
  margin: 0;
  width: 100%;
  list-style: none;
}
.plans .basic-card .body ul li {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
  width: 100%;
  min-width: 100%;
  font-size: 14px;
}
.plans .basic-card .body ul li:last-of-type {
  margin-bottom: 0;
}
.plans .basic-card .body ul li .icon {
  background-color: #a4d9e0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plans .summary-card > div {
  padding: 2rem;
}
.plans .summary-card .title {
  font-size: 16px;
  color: #101828;
  font-family: "inter-bold";
  margin-bottom: 1.5rem;
}
.plans .summary-card .price {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.plans .summary-card .price:last-of-type {
  margin-bottom: 0;
}
.plans .summary-card .price span {
  width: 50%;
}
.plans .summary-card .price .desc {
  font-size: 14px;
  color: #475467;
}
.plans .summary-card .price .the-price {
  font-size: 15px;
  color: #344054;
  font-family: "inter-bold";
}
.plans .summary-card .price .the-price span:first-of-type {
  font-family: "inter-bold";
}
.plans .summary-card svg {
  margin-top: 0.5rem;
}
.plans .order-range,
.plans .ai-range {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: 2rem;
}

.plans .the-order-range,
.plans .the-ai-range {
  width: 100%;
}

.plans .range-order-value,
.plans .range-ai-value {
  position: absolute;
  bottom: 40px;
  left: 9px;
  transform: translateX(-50%);
  font-size: 12px;
  color: #fff;
  background-color: var(--primary-color);
  padding: 0.4rem;
  border-radius: 6px;
  transition: left 0.05s;
}

.plans .range-order-value::before,
.plans .range-ai-value::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--primary-color);
}

/* Style for white points on the range line */
.plans .order-range .step-point,
.plans .ai-range .step-point {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: white; /* White color for points */
  border-radius: 50%;
  top: 36%;
  transform: translateY(-50%);
  z-index: 1;
}

/* Positioning for the range steps */
.plans .order-range .step-point[data-value="500"] {
  left: 1%;
}
.plans .order-range .step-point[data-value="2000"] {
  left: 6%;
}
.plans .order-range .step-point[data-value="5000"] {
  left: 16%;
}
.plans .order-range .step-point[data-value="10000"] {
  left: 32%;
}
.plans .order-range .step-point[data-value="20000"] {
  left: 65%;
}
.plans .order-range .step-point[data-value="30000"] {
  left: 98%;
}

.plans .ai-range .step-point[data-value="0"] {
  left: 0%;
}
.plans .ai-range .step-point[data-value="20"] {
  left: 20%;
}
.plans .ai-range .step-point[data-value="40"] {
  left: 40%;
}
.plans .ai-range .step-point[data-value="50"] {
  left: 50%;
}
.plans .ai-range .step-point[data-value="60"] {
  left: 59%;
}
.plans .ai-range .step-point[data-value="70"] {
  left: 69%;
}
.plans .ai-range .step-point[data-value="80"] {
  left: 79%;
}
.plans .ai-range .step-point[data-value="90"] {
  left: 88%;
}
.plans .ai-range .step-point[data-value="100"] {
  left: 98%;
}

.plans .discount {
  background: linear-gradient(to right, #e2fcff, #fff);
  border: 1px solid #5eb9c3;
  border-radius: 6px;
  margin-bottom: 1rem;
  display: none;
  position: relative;
}
.plans .discount .star-bottom {
  position: absolute;
  top: 60%;
  left: -13px;
  animation: scalingStars 1s 0.5s infinite linear alternate;
}
.plans .discount .star-top {
  position: absolute;
  top: -19px;
  left: 80%;
  animation: scalingStars 1s infinite linear alternate;
}
.plans .discount .title {
  font-size: 14px;
  margin-bottom: 0.5 !important;
}
.plans .discount .desc {
  font-size: 14px;
  margin-bottom: 0.5rem;
}
.plans .discount .desc a {
  color: var(--primary-color);
}
@keyframes scalingStars {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@media (max-width: 1500px) {
  .plans {
    margin: 50px 0;
  }

  .plans .cost-effective .the-card {
    padding: 1.5rem;
  }
  .plans .cost-effective .the-card .title {
    font-size: 25px;
  }
  .plans .cost-effective .the-card .sub-title {
    margin-bottom: 0.2rem;
  }
  .plans .cost-effective .the-card .desc {
    font-size: 13px;
  }
  .plans .cost-effective .the-card .orders .prices p {
    font-size: 13px;
  }
  .plans .cost-effective .range > input {
    width: 5rem;
    height: 2.7rem;
    border-radius: 6px;
    padding: 0.3rem;
  }
  .plans .basic-card {
    padding: 1.5rem;
    margin-bottom: 0rem;
  }
  .plans .basic-card .header {
    margin-bottom: 1rem;
  }
  .plans .basic-card .header .price .title {
    font-size: 18px;
  }
  .plans .basic-card .header .price .title .small {
    font-size: 13px;
  }

  .plans .basic-card .header .price .desc {
    font-size: 12px;
  }

  .plans .basic-card .body ul li {
    margin-bottom: 0.8rem;
    font-size: 13px;
  }

  .plans .summary-card > div {
    padding: 1.5rem;
  }
  .plans .summary-card .title {
    font-size: 16px;
    margin-bottom: 1rem;
  }
  .plans .summary-card .price {
    margin-bottom: 0.6rem;
  }

  .plans .summary-card .price .desc {
    font-size: 13px;
  }
  .plans .summary-card .price .the-price {
    font-size: 14px;
  }
}
@media (max-width: 992px) {
  .plans .cost-effective .the-card .orders,
  .plans .basic-card .body {
    display: block;
  }
  .plans .cost-effective .the-card .orders .desc,
  .plans .basic-card .body > div,
  .plans .cost-effective .the-card .orders .prices {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .plans {
    margin: 40px 0;
  }

  .plans .basic-card .body ul li:last-of-type {
    margin-bottom: 0.8rem;
  }
  .plans .basic-card {
    margin-top: 1rem;
    margin-bottom: 1rem;
  }
  .plans .cost-effective .the-card,
  .plans .summary-card > div,
  .plans .basic-card {
    padding: 1rem;
  }
  .plans .cost-effective .range .the-range,
  .plans .cost-effective .range .ai-listing-range {
    width: 80%;
  }
}
/* **************************************************************** */
/* start integrations */
.integrations {
  margin: 64px 0;
}
.integrations .title {
  font-size: 44px;
  font-family: "inter-bold";
}
.integrations .swiper {
  padding: 15px 5px;
}
.integrations .card {
  border: none;
  background-color: #fff;
  box-shadow: 10px 10px 10px 0 #77777720;
  padding: 10px;
  height: 6rem;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.integrations .card img {
  width: 100%;
}
.swiper-container {
  overflow: hidden; /* Prevent overflow issues */
  position: relative;
  width: 100%;
}

@media (max-width: 1500px) {
  .integrations {
    margin: 50px 0;
  }
  .integrations .title {
    font-size: 38px;
  }
  .integrations .card {
    height: 8rem;
    border-radius: 22px;
  }
  .integrations .card img {
    width: 80%;
  }
  .integrations .card.to-top {
    transform: translateY(-20px);
  }
  .integrations .card.to-bottom {
    transform: translateY(20px);
  }
}
@media (max-width: 992px) {
  .integrations .title {
    font-size: 30px;
    margin-bottom: 2rem;
  }
}
@media (max-width: 768px) {
  .integrations .title {
    font-size: 22px;
  }
  .integrations .card {
    transform: unset !important;
  }
  .integrations .card img {
    width: 50%;
  }
}
/* **************************************************************** */
/* all-plans */
.all-plans {
  margin: 64px 0;
  background-color: #f3feff;
  padding: 2rem;
  border-radius: 0 16px 16px 0;
}
.all-plans .title {
  position: relative;
  font-size: 44px;
  font-family: "inter-bold";
  color: #101828;
  margin-bottom: 4rem;
}
.all-plans .title svg {
  position: absolute;
  top: 80%;
  left: -2rem;
}
.all-plans .lists {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2%;
}
.all-plans .lists > div {
  width: 49%;
}
.all-plans .lists ul {
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}
.all-plans .lists ul li {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.all-plans .lists ul li:last-of-type {
  margin-bottom: 0;
}

@media (max-width: 1500px) {
  .all-plans {
    margin: 50px 0;
    padding: 1.5rem;
  }
  .all-plans .title {
    font-size: 38px;
    margin-bottom: 3rem;
  }
  .all-plans .title svg {
    left: -1.5rem;
  }

  .all-plans .lists ul li {
    font-size: 15px;
  }
  .all-plans .lists ul li svg {
    width: 20px;
    min-width: 20px;
  }
}
@media (max-width: 768px) {
  .all-plans .lists {
    display: block;
  }
  .all-plans .lists > div {
    width: 100%;
  }
  .all-plans .lists ul li:last-of-type {
    margin-bottom: 1rem;
  }
  .all-plans .title {
    font-size: 22px;
    margin-bottom: 2rem;
  }
  .all-plans .title svg {
    width: 8rem;
    top: 60%;
  }
}
/* **************************************************************** */
/* get-demo */
.get-demo {
  margin: 64px 0 0 0;
  background-color: #0f3c41;
  padding: 64px 0;
}
.get-demo .container > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}
.get-demo .title {
  color: #fff;
  font-size: 30px;
  margin-bottom: 0;
  width: 65%;
}
.get-demo .btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1rem;
}
.get-demo .btns a {
  min-width: fit-content !important;
}
.get-demo .btns a.white-btn {
  background-color: #fff;
  padding: 16px 22px;
}
@media (max-width: 1500px) {
  .get-demo {
    margin: 50px 0 0 0;
    padding: 50px 0;
  }

  .get-demo .title {
    font-size: 24px;
    width: 65%;
  }
  .get-demo .btns a.white-btn {
    background-color: #fff;
    padding: 14px 22px;
  }
}
@media (max-width: 768px) {
  .get-demo .container > div {
    display: block;
  }
  .get-demo .title {
    font-size: 20px;
    text-align: center;
    width: 100%;
    margin-bottom: 1rem;
  }
  .get-demo .btns {
    justify-content: center;
  }
}
/* **************************************************************** */