.plans {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      padding: 4rem 2rem;
      max-width: 1200px;
      margin: auto;
    }

    .plans-text {
      flex: 1;
      min-width: 300px;
      max-width: 600px;
    }

    .badge {
      background: #e6f3ee;
      color: #000;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: 30px;
      display: inline-block;
      margin-bottom: 1rem;
    }

    .plans h1 {
      font-size: 2.5rem;
      font-weight: 700;
      margin: 0;
      color: #000;
    }

    .plans h1 span {
      color: #2d66f5;
      display: block;
    }

    .plans p {
      margin-top: 1.5rem;
      color: #4a4a4a;
      line-height: 1.6;
      font-size: 1.1rem;
    }

    .store-buttons {
      display: flex;
      gap: 1rem;
      margin-top: 2rem;
    }

    .store-buttons img {
      height: 50px;
      cursor: pointer;
    }

    .plans-image {
      flex: 1;
      min-width: 300px;
      text-align: center;
      margin-top: 2rem;
    }

    .plans-image img {
      max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto
    }

    @media (max-width: 768px) {
      .hero {
        flex-direction: column;
        text-align: center;
      }

      .plans-text h1 {
        font-size: 2rem;
      }

      .store-buttons {
        justify-content: center;
      }
    }


    /******************************RATING SECTION***********************************/

.metric-box {
      border-radius: 20px;
      padding: 30px;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      color: #000;
      position: relative;
      overflow: hidden;
      transition: background-color 0.4s ease;
    }

    .curve {
      position: absolute;
      top: -20px;
      right: -20px;
      height: 100px;
      width: 100px;
      border-top: 8px solid;
      border-radius: 50%;
    }

    .bg-lightgreen { background-color: #f1f9f6; }
    .bg-lightpurple { background-color: #f6f1fa; }
    .bg-lightblue { background-color: #f1f4fd; }
    .bg-lightpeach { background-color: #fff3ed; }

    .curve-green { border-color: #1ba57a; }
    .curve-purple { border-color: #692fc2; }
    .curve-blue { border-color: #2d6df6; }
    .curve-brown { border-color: #e08855; }

    .stat-number {
      font-size: 2.5rem;
      font-weight: 700;
    }

    .text-description {
      font-size: 1rem;
      color: #5c6b7a;
    }

    /* Hover Effects */
    .metric-box.hover-purple:hover {
      background-color: #ede3ff !important;
    }

    .metric-box.hover-green:hover {
      background-color: #d6f7ea !important;
    }

    .metric-box.hover-peach:hover {
      background-color: #ffe4d3 !important;
    }

    .metric-box.hover-blue:hover {
      background-color: #e3ebff !important;
    }

    .how-it-works h4 {
      font-weight: 700;
      margin-bottom: 25px;
    }

     .how-it-works ul {
      list-style: none;
      padding-left: 0;
    }

    .how-it-works li {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 20px;
      font-size: 1rem;
    }