1#@!#!123s

��JFIF�� 1#@!#!123s
: / var / www / html / projects / baapstore /
Filename : pricing.html
back
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <!-- Fontawesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        --bs-primary-gradient: to right, #fbc161, #ed5469;
        --bs-main-color: #ed5469;
        --bs-second-color: #fbc161;
        --bs-font-family: "Poppins", sans-serif;
        --bs-secondary-font: "Inter", sans-serif;
      }

      html,
      body {
        height: 100%;
        font-family: var(--bs-font-family);
        background-color: #fff;
        color: #000;
        line-height: 1.6;
      }

      a {
        text-decoration: none;
      }

      a:hover {
        text-decoration: none;
      }

      body {
        overflow-x: hidden;
      }

      /* === Basic Typography === */
      h1,
      h2,
      h3,
      h4,
      h5,
      h6 {
        font-weight: 600;
      }

      p {
        margin-bottom: 1em;
      }

      .bs_gradient {
        background: linear-gradient(var(--bs-primary-gradient));
      }

      .heading_font {
        color: #2e2e2e;
        font-size: 40px;
        font-weight: 400;
        letter-spacing: -2.1px;
        line-height: 51px;
      }
      @media (max-width:500px) {
        .heading_font {
            color: #2e2e2e;
        font-size: 30px !important;
        line-height: 38px;
        font-weight: 400;
        letter-spacing: -1.1px;
        }
      }
      .heading_font span {
        background-clip: text;
        color: transparent;
        background-image: linear-gradient(var(--bs-primary-gradient));
        -webkit-background-clip: text;
      }

      .cliped_text {
        background-clip: text;
        color: transparent;
        background-image: linear-gradient(var(--bs-primary-gradient));
        -webkit-background-clip: text;
      }

      .section_padding {
        padding: 50px 0px;
      }
    </style>
  </head>
  <body>
    <!-- breedcamp -->
    <style>
      /* Breedcamp CSS */
      .title_bs {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .head_tag {
        max-width: max-content;
        padding: 4px 20px;
        font-size: 12px;
        color: #fff;
        border-radius: 50px;
      }


    </style>
    <div class="container section_padding">
      <div class="row">
        <div class="col-md-12 title_bs">
          <div class="head_tag bs_gradient">
            <i class="fa-solid fa-star"></i>
            <span>Pricing</span>
          </div>
          <div class="heading_font"> Dropshipping <span>Packages</span>
          </div>
        </div>
      </div>
    </div>
    <!-- breedcamp -->
    <!-- Pricing -->
    <style>
      /* Pricing */
      .head_offer {
        font-weight: 500;
        color: #000;
      }

      .head_offer_details {
        display: flex;
        justify-content: center;
      }

      .head_offer_details ul {
        display: flex;
        list-style: none;
        font-size: 16px;
        font-weight: 500;
        gap: 20px;
        color: var(--bs-main-color);
      }
        @media (max-width:768px) {
            .head_offer_details ul{
                flex-direction: column;
                gap: 2px;
                margin-top: 20px;
            }
        }
      .head_offer_details ul li span {
        font-weight: 800;
      }

      /* Pricing */
      .badge_price {
        margin: 0px 20px;
        padding: 2px 30px;
        background-color: var(--bs-second-color);
        max-width: max-content;
        border-radius: 5px;
        font-weight: 600;
      }

      .price_tage {
        margin-top: 40px;
        position: relative;
        box-shadow: 1px 1px 10px #0000002f;
        padding-top: 10px;
        border-radius: 18px 18px 26px 26px;
        background-color: #ffffff4d;
      }
      .price_div{
        cursor: pointer;
    }
    .price_tage{
          transition: all 0.2s linear;

      }
      .price_div:hover .price_tage{
        transform: translateY(-10px);
        transition: all 0.2s linear;
      }
      .price_box {
        padding: 2px;
        background: linear-gradient(var(--bs-primary-gradient));
        border-radius: 26px;
        margin-top: 10px;
      }

      .price_box_inner.pm_1 {
        background: linear-gradient(to bottom, #D8E4FF, #FFF);
        border-radius: 26px;
        padding: 20px;
      }

      .price_box_inner.pm_2 {
        background: linear-gradient(to bottom, #D3FFF0, #FFF);
        border-radius: 26px;
        padding: 20px;
      }

      .price_box_inner.pm_3 {
        background: linear-gradient(to bottom, #FFCFD6, #FFF);
        border-radius: 26px;
        padding: 20px;
      }

      .price {
        font-family: var(--bs-secondary-font);
        letter-spacing: -0.8px;
        margin-bottom: 10px;
      }

      .price p {
        font-size: 16px;
        font-weight: 700;
      }

      /* .price p .tooltip_price{
  font-size: 14px;
  font-weight: 400;
  border: 1px solid black;
  border-radius: 50px;
  padding: 5px;
  height: 5px;
} */
      .price h3 {
        font-size: 20px;
        font-weight: 900;
        margin-bottom: 0px;
      }

      .qm-p {
        font-size: 14px;
        font-weight: 500;
        letter-spacing: -0.8px;
        line-height: 16px;
        margin-bottom: 30px;
      }

      .get_bronze .btn {
        background-color: #4D83F8;
        padding: 8px;
        width: 100%;
        border-radius: 50px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid #4D83F8 ;
      }
      .get_bronze .btn:hover {
        border: 2px solid #4D83F8 !important;
        color: #4D83F8;
        background: transparent;
        box-shadow: 1px 1px 10px #4D83F8;
      }
      .get_gold .btn {
        background-color: #02BC7D;
        padding: 8px;
        width: 100%;
        border-radius: 50px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid #02BC7D ;
      }
      .get_gold .btn:hover {
        border: 2px solid #02BC7D !important;
        color: #02BC7D;
        background: transparent;
        box-shadow: 1px 1px 10px #02bc7d;
      }
      .get_diamond .btn {
        background-color: #ED5469;
        padding: 8px;
        width: 100%;
        border-radius: 50px;
        color: #fff;
        font-size: 14px;
        font-weight: 600;
        border: 2px solid #ED5469 ;
      }
      .get_diamond .btn:hover {
        border: 2px solid #ED5469 !important;
        color: #ED5469;
        background: transparent;
        box-shadow: 1px 1px 10px #ED5469;
      }
      .price_addons {
        margin-top: 20px;
      }

      .price_addons ul {
        list-style: none;
        margin-left: 5px;
      }

      .price_addons ul li img {
        width: auto;
        height: 15px;
      }

      .price_addons ul li {
        font-family: var(--bs-secondary-font);
        font-size: 13px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 5px;
        color: #242424;
        }
      .pc_tt{
        display: flex;
        align-items: baseline;
        gap: 10px;
      }
      .pc_tt .tooltip_price{
        width:15px;
        height:15px;
        border: 1px solid black;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50px;
        font-size: 10px;
        font-weight: 700;
        cursor: pointer;
        position: relative;
      }
      .pc_tt .tooltip_price .tooltip_item{
        position: absolute;
        background-color: #000;
        min-width: 100px;
        color: #fff;
        font-size: 10px;
        font-weight: 400;
        padding: 5px;
        bottom: -40px;
        letter-spacing: 0px;
        line-height: 11px;
        border-radius: 5px;
        max-height: 32px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s linear;
        transform: translateY(20px);
      }
      .pc_tt .tooltip_price:hover .tooltip_item{
        opacity: 1;
        visibility: visible;
        transition: all 0.3s linear;
        transform: translateY(0px);

      }
      .pt_popular{
        display: flex;
        gap: 10px;
        align-items: baseline;
      }
      .pt_popular .popular_tag img{
        width: 15px;
        height: auto;
      }
      .pt_popular .popular_tag{
        font-size: 10px;
        font-weight: 500;
        background-color: var(--bs-second-color);
        padding: 2px 10px;
        border-radius: 10px;
        min-width: max-content;
      }
      .pt_rrm{
        display: flex;
        flex-wrap: wrap;
      }
      .pc_dropdown{
        width: 100%;
    padding: 8px;
    border: 0px;
    background: white;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    margin-bottom: 1rem;
      }
      .pc_dropdown:focus{
        outline: none;
      }
      .pc_dropdown option{
        padding: 5px;
    font-size: 12px;
    font-weight: 700;
      }
      .pc_tt p{
        margin-bottom: 0.5rem;
      }
      .col-md-4.price_div{
        display: flex;
      }
      .price_box,.price_box_inner.pm_1,.price_box_inner.pm_2,.price_box_inner.pm_3{
        height: 100%;
      }
    </style>
    <div class="container">
      <div class="row">
        <div class="col-md-12 text-center">
          <div class="heading_font head_offer"> Current Offers </div>
          <div class="head_offer_details">
            <ul>
              <li>Get up to <span>10%</span> on Subscription Plans </li>
              <li>Current Offers- Expiring Shortly</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="row mt-5 pt_rrm">
        <div class="col-md-4 price_div">
          <div class="price_tage">
            <div class="badge_price"> Bronze </div>
            <div class="price_box">
              <div class="price_box_inner pm_1">
                <div class="price">
                  <h3>₹ 15,000 <span>per year</span>
                  </h3>
                 <div class="pc_tt">
                    <p>₹14,999 One-time Ecosystem Fee</p> <span class="tooltip_price"> ? <div class="tooltip_item">Lorem ipsum dolor sit amet.</div></span>
                 </div>
                 <div>
                    <select name="" id="" class="pc_dropdown">
                        <option value="1year">29999 / 1 Year Validity</option>
                        <option value="1year">44999 / 3 Year Validity</option>
                        <option value="1year">65999 / Lifetime Validity</option>
                    </select>
                 </div>
                </div>
                <p class="qm-p">Best for beginners who are just entering the dropshipping world.</p>
                <a href="" class="get_bronze">
                  <div class="btn"> Get Bronze </div>
                </a>
                <div class="price_addons">
                  <ul>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Wholesale Price
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> 10 Free Shipments

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> ₹ 45 Flat shipping cost per product

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Full Products Access worth ₹ 100crs + (Except Plus Size)

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> All Categories Access (Except Plus Size Category)
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Shopify API (order & stock automations)	
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> WooCommerce API (order & stock automations)
	
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Amazon, Shopify, WooCommerce, Opencart, CSV	
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> 5.5lacs Customers Database
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 price_div">
          <div class="price_tage">
            <div class="badge_price"> Gold </div>
            <div class="price_box">
              <div class="price_box_inner pm_2">
                <div class="price">
             <div class="pt_popular">
                <div>
                    <h3>₹ 15,000 <span>per year</span> 
                    </h3>
                  </div>
                  <span class="popular_tag"><img src="./img/fi_471709.svg" alt="">Most Popular</span>
             </div>
                  <div class="pc_tt">
                    <p>₹14,999 One-time Ecosystem Fee</p> <span class="tooltip_price"> ? <div class="tooltip_item">Lorem ipsum dolor sit amet.</div></span>
                 </div>
                 <div>
                    <select name="" id="" class="pc_dropdown">
                        <option value="1year">29999 / 1 Year Validity</option>
                        <option value="1year">44999 / 3 Year Validity</option>
                        <option value="1year">65999 / Lifetime Validity</option>
                    </select>
                 </div>
                  </p>
                </div>
                <p class="qm-p">Best for beginners who are just entering the dropshipping world.</p>
                <a href="" class="get_gold">
                  <div class="btn"> Get Gold </div>
                </a>
                <div class="price_addons">
                  <ul>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Extra 26% Discount from Wholesale price
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> 10 Free Shipments

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> ₹ 44 Flat shipping cost per product

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">Full Products Access worth ₹ 100crs + (Except Plus Size)

                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> All Categories Access (Except Plus Size Category)
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Amazon, Shopify, WooCommerce, Opencart, CSV
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> 5.5lacs Customers Database

                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4 price_div">
          <div class="price_tage">
            <div class="badge_price"> Diamond </div>
            <div class="price_box">
              <div class="price_box_inner pm_3">
                <div class="price">
                  <h3 >₹ 15,000 <span>per year</span>
                  </h3>
                  <div class="pc_tt"> 
                    <p>₹14,999 One-time Ecosystem Fee</p> <span class="tooltip_price"> ? <div class="tooltip_item">Lorem ipsum dolor sit amet.</div></span>
                 </div>
                 <div>
                    <select name="" id="" class="pc_dropdown">
                        <option value="1year">29999 / 1 Year Validity</option>
                        <option value="3year">44999 / 3 Year Validity</option>
                        <option value="lifetime">65999 / Lifetime Validity</option>
                    </select>
                 </div>
                </div>
                <p class="qm-p">Best for beginners who are just entering the dropshipping world.</p>
                <a href="" class="get_diamond">
                  <div class="btn"> Get Diamand </div>
                </a>
                <div class="price_addons">
                  <ul>
                    <li>
                      <img src="./img/Vector.svg" alt="">Extra 26% Discount from Wholesale price	
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Extra 40% Discount on Product (Applicable on Diamond Lifetime Plan)
                     
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">  15 Free Shipments
                     
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">  ₹ 39 Flat shipping cost per product
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">Full Products Access worth ₹ 100crs + (Except Plus Size)
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">All Categories Access (Except Plus Size Category)
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Shopify API (order & stock automations)		
                    
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">   WooCommerce API (order & stock automations)
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Opencart API (order & stock automations)
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> Amazon, Shopify, WooCommerce, Opencart, CSV
                     
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt="">  One Assistant for New Products Upload
                      
                    </li>
                    <li>
                      <img src="./img/Vector.svg" alt=""> 90lacs Customers Database
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
          const selects = document.querySelectorAll(".pc_dropdown");
      
          selects.forEach(select => {
            const priceHeading = select.closest(".price").querySelector("h3");
      
            function updateHeading() {
              const selectedText = select.options[select.selectedIndex].text;
              const [price, duration] = selectedText.split(" / ");
              priceHeading.innerHTML = `₹ ${price} <span>${duration}</span>`;
            }
      
            // Set default on load
            updateHeading();
      
            // Update on change
            select.addEventListener("change", updateHeading);
          });
        });
      </script>
      
      
      
      
    <!-- Pricing -->
    <!-- Features -->
    <style>
      /* Features */
      .feature_table {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 50px;
      }

      .feature_table p {
        font-weight: 500;
      }

      .feature_button div {
        display: flex;
        gap: 15px;
        align-items: center;
        max-width: max-content;
        color: #000;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: -0.8px;
        padding: 10px 15px;
        border-radius: 8px;
      }

      .accordion-header .fa-plus {
        transition: transform 0.3s ease;
      }

      .accordion-header.active .fa-plus {
        transform: rotate(225deg);
      }

      .comparison-grid {
        display: grid;
        grid-template-columns: 1.2fr repeat(3, 1fr);
        align-items: center;
      }

      .heading-row {
        font-weight: bold;
        background-color: #fff;
      }

      .heading-cell {
        padding: 12px;
        text-align: center;
        border-right: 2px solid #fbc0615c;
        font-size: 18px;
        font-weight: 500;
        letter-spacing: -0.8px;
      }

      .heading-cell:first-child {
        text-align: left;
      }

      .fe_tick {
        height: 20px;
        width: auto;
      }

      .feature-title {
        font-weight: 500;
        padding: 16px;
        letter-spacing: -0.7px;
        font-size: 14px;
        background: #fff;
        border-right: 2px solid #fbc0615c;
      }

      .feature {
        padding: 16px;
        text-align: center;
        background: #fff;
        font-weight: 500;
        padding: 16px;
        letter-spacing: -0.7px;
        font-size: 14px;
        height: 100%;
        border-right: 2px solid #fbc0615c;
      }

      @media (max-width:768px) {

        .feature-title,
        .feature {
          font-size: 12px;
        }
      }

      .accordion-header {
        padding: 16px;
        border: none;
        text-align: left;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        letter-spacing: -0.7px;
        font-size: 20px;
        background: #fff;
        border-top: 2px solid #FFF1E5;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .accordion-header .fa-plus {
        font-size: 22px;
        font-weight: 400 !important;
      }

      .accordion-header.active {
        background: #fff;
      }

      .accordion-content {
        display: none;
        padding: 0;
      }

      .accordion-content.open {
        display: block;
      }

      .comparison-grid .feature-title:nth-child(8n + 1),
      .comparison-grid .feature:nth-child(8n + 2),
      .comparison-grid .feature:nth-child(8n + 3),
      .comparison-grid .feature:nth-child(8n + 4) {
        background-color: #fff1e585;
      }

      .bronze.active,
      .gold.active,
      .diamond.active {
        background: #FFF1E5;
        background-clip: padding-box;
        position: relative;
      }

      .bronze.tm-rm.active::before,
      .gold.tm-rm.active::before,
      .diamond.tm-rm.active::before {
        content: "";
        position: absolute;
        top: -3px;
        left: -3px;
        right: -3px;
        bottom: -3px;
        z-index: 0;
        border-radius: 20px;
        background: linear-gradient(var(--bs-primary-gradient));
        height: 3px;
      }

      @media (max-width: 768px) {
        .comparison-grid {
          grid-template-columns: 1.5fr repeat(3, 1fr);
          overflow-x: auto;
          font-size: 14px;
        }

        .feature,
        .feature-title {
          padding: 12px;
        }
      }

      .feature_accordion {
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transition: all 0.4s ease;
      }

      .feature_accordion.shows {
        max-height: 1000px;
        opacity: 1;
        visibility: visible;
        overflow: visible;
      }
    </style>
    <div class="container" style="margin-top: 60px;margin-bottom: 40px;">
      <div class="row" style="margin-top: 40px;">
        <div class="col-md-12 text-center feature_table">
          <p>All prices are in USD and charged per site with applicable taxes added at checkout.</p>
          <a href="" class="feature_button ">
            <div class="bs_gradient">View all plan features <i class="fa-solid fa-chevron-down" id="accordionToggleIcon"></i>
            </div>
          </a>
        </div>
      </div>
      <div class="row feature_accordion">
        <div class="col-md-12">
          <!-- Top Column Headings -->
          <div class="comparison-grid heading-row">
            <div class="heading-cell">Features</div>
            <div class="heading-cell plan-toggle bronze tm-rm" data-plan="bronze">Bronze</div>
            <div class="heading-cell plan-toggle gold tm-rm" data-plan="gold">Gold</div>
            <div class="heading-cell plan-toggle diamond tm-rm" data-plan="diamond">Diamond</div>
          </div>
          <!-- Accordion Section -->
          <div class="accordion">
            <button class="accordion-header active" data-section="products">
              <span class="cliped_text">Products Access</span>
              <i class="fa fa-plus"></i>
            </button>
            <div class="accordion-content open" data-section="products">
              <div class="comparison-grid">
                <div class="feature-title">Full Products Access worth ₹ 100crs + (Except Plus Size)</div>
                <div class="feature bronze active">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature gold">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature diamond">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature-title">All Categories Access</div>
                <div class="feature bronze active">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature gold">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature diamond">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature-title">Plus Size Access</div>
                <div class="feature bronze active">—</div>
                <div class="feature gold">—</div>
                <div class="feature diamond">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
              </div>
            </div>
            <button class="accordion-header " data-section="delivery">
              <span class="cliped_text">Delivery Details</span>
              <i class="fa fa-plus"></i>
            </button>
            <div class="accordion-content" data-section="delivery">
              <div class="comparison-grid">
                <div class="feature-title">Complimentary Free Deliveries</div>
                <div class="feature bronze active">10 Free Shipments</div>
                <div class="feature gold">10 Free Shipments</div>
                <div class="feature diamond">10 Free Shipments</div>
                <div class="feature-title">Unlimited Discounted Shipping Prices(After Free Deliveries)</div>
                <div class="feature bronze active">₹ 45 Flat shipping cost per product😄</div>
                <div class="feature gold">₹ 45 Flat shipping cost per product😄</div>
                <div class="feature diamond">₹ 39 Flat shipping cost per product😄</div>
                <div class="feature-title">COD Available</div>
                <div class="feature bronze active">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature gold">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature diamond">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature-title">Can 100% Orders be COD?</div>
                <div class="feature bronze active">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature gold">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
                <div class="feature diamond">
                  <img src="./img/Vector.svg" class="fe_tick" alt="">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      // Accordion toggle
      document.querySelectorAll('.accordion-header').forEach(header => {
        header.addEventListener('click', () => {
          const section = header.dataset.section;
          const content = document.querySelector(`.accordion-content[data-section="${section}"]`);
          const icon = header.querySelector('i');
          // If already open, close it
          const isOpen = content.classList.contains('open');
          // Remove active/open from all
          document.querySelectorAll('.accordion-header').forEach(h => h.classList.remove('active'));
          document.querySelectorAll('.accordion-content').forEach(c => c.classList.remove('open'));
          // Toggle current one
          if (!isOpen) {
            header.classList.add('active');
            content.classList.add('open');
            icon.style.transform = 'rotate(180deg)';
          } else {
            icon.style.transform = 'rotate(0deg)';
          }
        });
      });
      // Column highlight toggle
      document.querySelectorAll('.plan-toggle').forEach(btn => {
        btn.addEventListener('click', () => {
          const plan = btn.dataset.plan;
          ['bronze', 'gold', 'diamond'].forEach(p => {
            document.querySelectorAll(`.${p}`).forEach(cell => cell.classList.remove('active'));
          });
          document.querySelectorAll(`.${plan}`).forEach(cell => cell.classList.add('active'));
        });
      });
      document.querySelectorAll('.bronze').forEach(cell => {
        cell.classList.add('active');
      });
      document.querySelector('.feature_button').addEventListener('click', function(e) {
        e.preventDefault();
        const acc = document.querySelector('.feature_accordion');
        const icon = document.getElementById('accordionToggleIcon');
        acc.classList.toggle('shows');
        if (acc.classList.contains('shows')) {
          icon.classList.remove('fa-chevron-down');
          icon.classList.add('fa-chevron-up');
          acc.scrollIntoView({
            behavior: 'smooth',
            block: 'start'
          });
        } else {
          icon.classList.remove('fa-chevron-up');
          icon.classList.add('fa-chevron-down');
        }
      });
    </script>
    <!-- Features -->
    <!-- Terms -->
    <style>
      /* terms */
      .terms_table {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        border-radius: 10px;
        overflow: hidden;
      }

      .term_years,
      .term_price {
        padding: 16px;
        text-align: center;
        border-right: 1px solid #fbc0615c;
        border-bottom: 1px solid #fbc0615c;
        font-weight: 500;
        letter-spacing: -0.7px;
      }

      .terms_table>div:nth-child(4n) {
        border-right: none;
      }

      .terms_table>div:nth-child(n+5):nth-child(-n+8),
      .terms_table>div:nth-child(n+13):nth-child(-n+16) {
        background-color: #fff;
      }

      .terms_table>div:nth-child(n+9):nth-child(-n+12) {
        background-color: #FFF1E5;
      }

      .tm_term {
        text-align: center;
        font-weight: 500;
        font-size: 18px;
        letter-spacing: -0.7px;
        margin: 50px 0px;
      }
    </style>
    <div class="container">
      <div class="row">
        <div class="col-md-12 tm_term">
          <p>Are you looking for long term plans?</p>
        </div>
        <div class="col-md-12">
          <div class="terms_table">
            <div class="term_years"></div>
            <div class="term_years">1Year Validity</div>
            <div class="term_years">3Year Validity</div>
            <div class="term_years">Lifetime Validity</div>
            <div class="term_years">Bronze Plan</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
            <div class="term_years">Gold Plan</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
            <div class="term_years">Diomond Plan</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
            <div class="term_price">29999</div>
          </div>
        </div>
      </div>
    </div>
    <!-- Payment Option -->
    <style>
      /* Payment */
      .payment_option {
        padding: 80px 0px;
        letter-spacing: -0.7px;
      }

      .pt_title {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin-bottom: 50px;
        letter-spacing: -0.7px;
      }

      .pt_box {
        background-color: #E4E4E4;
        border-radius: 50px;
        padding: 45px;
      }

      .pt_in_title {
        font-size: 18px;
        font-weight: 600;
      }

      .pt_in {
        font-size: 18px;
        font-weight: 400;
      }

      .pt_in {
        margin-bottom: 25px;
      }

      .pt_box .col-md-6 {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 52px;
      }
    </style>
    <div class="container payment_option">
      <div class="row">
        <div class="col-md-12">
          <h5 class="pt_title">Pro Tip: Avoid the payment gateway's extra convenience fee by paying via any of the below options:</h5>
        </div>
      </div>
      <div class="row pt_box">
        <div class="col-sm-12 col-sm-offset-0 col-md-6">
          <div class="pt_in ">
            <p class="pt_in_title">1. Pay via UPI</p>
            <p class="pt_details">Please scan and pay to the below UPI QR Code.</p>
            <p>
              <strong>Note:</strong> You will see the name as 'Uptail Private Limit'.
            </p>
          </div>
          <div class="pt_in ">
            <p class="pt_in_title">2. Pay via NEFT/IMPS:</p>
            <p class="pt_details"> Account Name: Uptail Private Limited <br> Account Number: 50200027662080 <br> Account Type: Current <br> Bank: HDFC <br> IFSC Code: HDFC0002043 <br> Branch: CIT Nagar, Chennai </p>
          </div>
        </div>
        <div class="col-sm-12 col-md-6">
          <div class="pt_scanner">
            <img src="./img/Baapstore-new-upi.png" alt="UPI QR" class="img-responsive center-block" style="max-width:100%;">
          </div>
        </div>
      </div>
    </div>
    <!-- Payment Option -->
    <!-- FAQ -->
    <style>
      /* FAQ */
      
      
      @media (min-width:768px) {
        .faq_sec {
          padding: 80px 0;
        }
        .faq_sec .col-md-6 {
        padding: 0;
      }
      }
      .faq.heading_font {
        padding-bottom: 40px;
      }

      .faq_ans {
        display: none;
        padding: 10px;
        background: #f9f9f9;
        border-top: 1px solid #ddd;
        font-size: 14px;
        color: #444;
      }

      .faq_qn {
        cursor: pointer;
        padding: 12px;
        background: #fff;
        font-weight: 500;
        font-size: 18px;
        position: relative;
        letter-spacing: -0.7px;
      }

      .faq_item {
        margin-top: 10px;
        border-bottom: 2px solid #fbc0615c;
      }

      .faq_qn .icon-toggle {
        float: right;
        transition: transform 0.3s ease;
      }

      .faq_item.active .icon-toggle {
        transform: rotate(45deg);
        /* Plus becomes an X */
      }
    </style>
    <div class="container faq_sec">
      <div class="row">
        <div class="col-md-12">
          <div class="faq heading_font"> Frequently asked <br>
            <span>questions</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6">
          <div class="faq_accordion">
            <div class="faq_item">
              <div class="faq_qn"> How many pro ducts do I receive? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">The actual count varies depending on stock movements(incoming/outgoing). Currently, we have 150,000+ products with 7000+ SKUs.</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> Can I add/list my own products? Is there any limit? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corrupti iure beatae! Sunt fuga fugit inventore ad nisi vitae placeat, commodi iste asperiores possimus ratione, aut nesciunt esse laudantium voluptate!</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> How many products do I receive? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro cupiditate saepe facere! Corrupti laboriosam, voluptas ipsum sunt nobis aliquid dolores atque repellendus architecto, ad a omnis deleniti nemo ab laudantium?</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> Can I add/list my own products? Is there any limit? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corrupti iure beatae! Sunt fuga fugit inventore ad nisi vitae placeat, commodi iste asperiores possimus ratione, aut nesciunt esse laudantium voluptate!</div>
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="faq_accordion">
            <div class="faq_item">
              <div class="faq_qn"> How many pro ducts do I receive? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">The actual count varies depending on stock movements(incoming/outgoing). Currently, we have 150,000+ products with 7000+ SKUs.</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> Can I add/list my own products? Is there any limit? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corrupti iure beatae! Sunt fuga fugit inventore ad nisi vitae placeat, commodi iste asperiores possimus ratione, aut nesciunt esse laudantium voluptate!</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> How many products do I receive? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro cupiditate saepe facere! Corrupti laboriosam, voluptas ipsum sunt nobis aliquid dolores atque repellendus architecto, ad a omnis deleniti nemo ab laudantium?</div>
            </div>
            <div class="faq_item">
              <div class="faq_qn"> Can I add/list my own products? Is there any limit? <i class="fa fa-plus icon-toggle"></i>
              </div>
              <div class="faq_ans">Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus corrupti iure beatae! Sunt fuga fugit inventore ad nisi vitae placeat, commodi iste asperiores possimus ratione, aut nesciunt esse laudantium voluptate!</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      //   FAQ
      document.addEventListener("DOMContentLoaded", function() {
        const faqItems = document.querySelectorAll(".faq_item");
        faqItems.forEach(item => {
          const question = item.querySelector(".faq_qn");
          question.addEventListener("click", () => {
            const isActive = item.classList.contains("active");
            // Close all
            faqItems.forEach(i => {
              i.classList.remove("active");
              i.querySelector(".faq_ans").style.display = "none";
            });
            // Toggle clicked item
            if (!isActive) {
              item.classList.add("active");
              item.querySelector(".faq_ans").style.display = "block";
            }
          });
        });
      });
    </script>
    <!-- Policy -->
    <style>
      /* Policy */
      @media (min-width:768px) {
        .policy {
            padding: 80px 0px;
        }
      }
      .policy {
        font-size: 16px;
        font-weight: 500;
        color: #424953;
      }

      .poicy_rm.heading_font {
        padding-bottom: 40px;
      }
      @media (max-width:768px) {
        .poicy_rm.heading_font {
        padding-top: 40px;
      }
      }
      .pl_head {
        font-size: 18px;
        color: #000;
      }
    </style>
    <div class="container policy">
      <div class="row">
        <div class="col-md-12">
          <div class="poicy_rm heading_font"> Refund Policy for <br> Subscription <span>Packages</span>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12">
          <p>We have put all the important content in the public display i.e., products we dropship, web designs we create, etc., Also you can ask us any queries you have over call or Whatsapp before joining. So please subscribe our services only if you know all the details. Don't hesitate to ask any queries you have.</p>
          <p>Why? We provide 10x value for the fee we charge and dedicated services. So trying out our services and asking for a refund is waste of the time and effort for both of us.</p>
          <p>However, be known that we assure you a best services and if at all you face any difficulty, we are here to fix it for you. So focus on business and growth.</p>
          <p class="pl_head">* Product Refunds:</p>
          <p>Is your buyer not satisfied with the item sold? do not worry, we issue refunds and replacements to your buyer. You can read more about the product return and refund policies at  <a href="">support.baapstore.xyz</a>. </p>
        </div>
      </div>
    </div>
    <!-- fontawesom 6 JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/js/all.min.js" integrity="sha512-b+nQTCdtTBIRIbraqNEwsjB6UvL3UEMkXnhzd8awtCYh0Kcsjl9uEgwVFVbhoj3uu1DO1ZMacNvLoyJJiNfcvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </body>
</html>