/* @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Source Sans Pro", sans-serif;
} */

/* body {
  background-color: #dff9fb;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
} */

h1 {
  text-align: center;
  margin-top: 2rem;
}

p {
  text-align: center;
  margin-bottom: 4rem;
}
.bg-img {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; /* allow wrapping on smaller screens */
  background-image: url('/static/assets/images/bg-img-2.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0;
  padding: 1rem 0;
  width: 100%;
}

.plan {
  flex: 1;
  min-width: 300px !important; /* ✅ Prevent squishing */
  margin: 0; /* reset */
  border: 1px solid white;
  border-radius: 12px;
  text-align: center;
  background: rgb(206 89 157 / 68%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  color: white;
  /* font-weight: bold; */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem; /* ✅ space between rows */
}
.planb2c{
  max-width: 30%;

}
@media (max-width: 576px) {
  .planb2c {
    max-width: 100%;
    width: 100%;
  }
}
/* ✅ Spacing between cards only on same row */
.plan:not(:first-child) {
  margin-left: 1.5rem;
}

/* ✅ Mobile: Stack the cards */
@media (max-width: 991px) {
  .bg-img {
    flex-direction: column;
    align-items: stretch;
  }

  .plan {
    margin-left: 0 !important;
  }
}

.price span{
  color: #9400ab;

}.pricing {
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: center;

  .plan {
    
    h2 {
      font-size: 22px;
      margin-top: 22px;
      font-weight: bold;
      color: #d1258f;
    }

    .price {
      margin-bottom: 1rem;
      font-size: 30px;
      color: #9400ab;
    }
  

    ul.features {
      list-style-type: none;
      text-align: left;
      padding: 30px;

      li {

        /* margin: 8px; */
        .fas {
          margin-right: 4px;
        }

        .fa-check {
          color: #b034c3;
          font-weight: bold;
        }

        .fa-times {
          color: #eb4d4b;
        }
      }
    }

    ul.features li {
      margin-bottom: 10px;

      .fas {
        color: #b034c3;
        min-width: 20px;
      }
    }

    .pricing {
      align-items: stretch;

      .plan {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    }

    button {
      border: 2px solid white;
      font-weight: bold;
      width: 50%;
      padding: 9px 35px;
      margin: 1rem;
      color: #fff;
      border-radius: 5px;
      cursor: pointer;
      font-size: 16px;
    }

    
    .border-last {
      width: 100%;
      padding: 5px;
      /* border: 2px solid white; */
      background-color: #520054;
    }

    &.popular {
      /* border: 2px solid #6ab04c; */
      position: relative;
      /* transform: scale(1.08); */

      .recomand {
        position: absolute;
        top: 20px;
        left: -60px;
        background-color: #fff024;
        color: #8a5a00;
        font-weight: bold;
        padding: 6px 55px;
        font-size: 14px;
        transform: rotate(-45deg);
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
        z-index: 1;
      }

    }

    &:hover {
      box-shadow: 5px 7px 67px -28px rgba(0, 0, 0, 0.37);
    }
  }
}

.yellocontainer{
  background-color: #FFF8E6;
  color: #FFB01B;
  /* width: 96%; */
  align-items: center;
  justify-content: center;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.cross-text{
  text-decoration: line-through;

}

.price-buttom-text{
  margin-top: 0;
  margin-bottom: 0rem;
  padding: 7px
}
.video-wrap-20{
  padding-top: 20px!important;
  padding-bottom: 14px!important;
}

/* Toggle */
.content-section {
            display: none;
        }

        .content-section.active {
            display: block;
        }

.demo-section {
            text-align: center;
                width: fit-content;
        }

   .segmented-control {
            display: flex;
            border: 2px solid #8e44ad;
            border-radius: 8px;
            overflow: hidden;
            background-color: white;
        }

        .segment {
            padding: 12px 24px;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.2s ease;
            border: none;
            outline: none;
            min-width: 120px;
            text-align: center;
        }

        .segment.active {
          background: #8B388D;
            color: white;
        }

        .segment:not(.active) {
            background-color: white;
            color:  #D91286;
;
        }

        .segment:not(.active):hover {
            background-color: #f8f4ff;
        }

        .demo-section {
            text-align: center;
        }

        .selected-value {
            margin-top: 20px;
            padding: 10px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            color: #333;
        }




.price span.month-font {
  font-size: 16px;

}
.payment-text-b{
    font-size: 16px;
    font-weight: bold;
}