<!-- PRICING ISOLATED CSS -->
<style>
.hm-pro-wrapper * { box-sizing: border-box; }
.hm-pro-tabs-container { display: flex; flex-wrap: nowrap !important; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; align-items: center; gap: 8px; padding: 6px; }
.hm-pro-tabs-container::-webkit-scrollbar { display: none; }
.hm-pro-tab { min-width: 160px; padding: 12px 20px; border-radius: 50px; border: 2px solid transparent; text-align: center; cursor: pointer; transition: all 0.3s ease; flex-shrink: 0; }
.hm-pro-tab.active { background-color: #d90000; color: white; border-color: #d90000; box-shadow: 0 4px 15px rgba(217, 0, 0, 0.3); }
.hm-pro-tab.inactive { background-color: transparent; color: #1f2937; }
.hm-pro-tab:hover { background-color: #ffcc00 !important; border-color: #ffcc00 !important; color: #000 !important; }
.hm-pro-tab:hover div { color: #000 !important; }
.hm-pro-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; gap: 24px; padding: 30px 10px 40px 10px; -ms-overflow-style: none; scrollbar-width: none; align-items: stretch !important; }
.hm-pro-slider::-webkit-scrollbar { display: none; }
.hm-pro-card { scroll-snap-align: start; flex: 0 0 100%; display: flex; flex-direction: column; border-radius: 32px; padding: 32px; transition: all 0.3s ease; }
@media (min-width: 1024px) { .hm-pro-card { flex: 0 0 calc(33.333% - 16px); } }
.hm-pro-card-content { flex-grow: 1; }
.hm-pro-card-footer { margin-top: auto; padding-top: 30px; }
.hm-pro-btn-outline:hover { background-color: #ffcc00 !important; border-color: #ffcc00 !important; color: #000 !important; }
.hm-pro-btn-outline:hover i { color: #000 !important; }
.hm-pro-btn-solid:hover { background-color: #ffcc00 !important; color: #000 !important; }
.hm-pro-btn-solid:hover i { background-color: #000 !important; color: #ffcc00 !important; }
</style>

<!-- ================= PRICING SECTION ================= -->
<div class="hm-pro-wrapper">
    <section class="relative z-20 bg-[#f4f5f8] pb-16 px-4">
        
        <!-- Overlapping Tabs (Negative Margin) -->
        <div class="relative z-30 -mt-16 md:-mt-20 max-w-[1050px] mx-auto">
            <div class="bg-white p-2 rounded-full shadow-[0_10px_30px_rgba(0,0,0,0.08)] border border-gray-100">
                <div class="hm-pro-tabs-container">
                    <div class="hm-pro-tab active"><div class="font-bold text-[14px]">Billed Triennially</div><div class="text-[11px] opacity-90 mt-0.5">Save Up to 70%</div></div>
                    <div class="hm-pro-tab inactive"><div class="font-bold text-[14px]">Billed Biennially</div><div class="text-[11px] font-medium mt-0.5">Save Up to 60%</div></div>
                    <div class="hm-pro-tab inactive"><div class="font-bold text-[14px]">Billed Annually</div><div class="text-[11px] font-medium mt-0.5">Save Up to 50%</div></div>
                    <div class="hm-pro-tab inactive"><div class="font-bold text-[14px]">Billed Semi-Annually</div><div class="text-[11px] font-medium mt-0.5">Save Up to 35%</div></div>
                    <div class="hm-pro-tab inactive"><div class="font-bold text-[14px]">Billed Quarterly</div><div class="text-[11px] font-medium mt-0.5">Save Up to 25%</div></div>
                    <div class="hm-pro-tab inactive"><div class="font-bold text-[14px]">Billed Monthly</div><div class="text-[11px] font-medium mt-0.5">Save Up to 10%</div></div>
                </div>
            </div>
        </div>

        <!-- Cards Slider -->
        <div class="relative max-w-[1100px] mx-auto mt-2">
            <div class="hm-pro-slider">
                
                <!-- Card 1 -->
                <div class="hm-pro-card bg-white shadow-sm hover:shadow-xl border border-gray-100">
                    <div class="hm-pro-card-content">
                        <div class="flex justify-center mb-5"><div class="w-16 h-16 rounded-full bg-red-50 text-[#d90000] flex items-center justify-center"><i class="fa-regular fa-paper-plane text-[26px]"></i></div></div>
                        <h4 class="text-[24px] font-black text-center text-gray-900">Level 1</h4>
                        <p class="text-[13px] text-gray-500 text-center mb-6">Mostly for personal using</p>
                        <div class="text-center mb-6">
                            <span class="text-sm text-gray-400 line-through font-semibold">₹135</span>
                            <div class="text-[52px] font-black text-gray-900 my-1 flex items-baseline justify-center"><span class="text-[26px] font-bold mr-1">₹</span>89<span class="text-[13px] font-bold text-gray-500 ml-1">/Monthly</span></div>
                            <span class="text-[#d90000] text-[13px] font-bold block mt-1">Save 34%</span>
                        </div>
                        <ul class="text-[13.5px] text-gray-700 font-medium space-y-4">
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 3 GB NVMe SSD Storage</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> Host 1 Website</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 1 Subdomain</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 1 Email Account</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 2 MySQL Databases</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> Free Encrypt SSL</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> cPanel Control Panel</li>
                            <li class="flex items-center"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 24/7 Expert Support</li>
                        </ul>
                    </div>
                    <div class="hm-pro-card-footer">
                        <a href="#" class="hm-pro-btn-outline w-full py-4 rounded-full border-2 border-[#d90000] text-[#d90000] font-bold text-[15px] flex items-center justify-center gap-2 transition-all">
                            Get Started Now <i class="fa-solid fa-arrow-right-long border-2 rounded-full w-[26px] h-[26px] flex items-center justify-center text-[11px]"></i>
                        </a>
                    </div>
                </div>

                <!-- Card 2 (Most Popular) -->
                <div class="hm-pro-card bg-gradient-to-b from-[#e60000] to-[#b30000] text-white shadow-[0_20px_40px_rgba(217,0,0,0.3)] border border-red-700 relative lg:scale-[1.05] z-10">
                    <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-white text-[#d90000] text-[12px] font-extrabold px-5 py-1.5 rounded-full shadow-md whitespace-nowrap flex items-center gap-1.5">
                        <i class="fa-solid fa-star"></i> MOST POPULAR
                    </div>
                    <div class="hm-pro-card-content">
                        <div class="flex justify-center mb-5 mt-2"><div class="w-16 h-16 rounded-full bg-white/10 flex items-center justify-center"><i class="fa-solid fa-crown text-[26px]"></i></div></div>
                        <h4 class="text-[24px] font-black text-center">Level 2</h4>
                        <p class="text-[13px] text-white/90 text-center mb-6">Ideal solution for beginners</p>
                        <div class="text-center mb-6">
                            <span class="text-sm text-white/70 line-through font-semibold">₹675 /Year</span>
                            <div class="text-[52px] font-black my-1 flex items-baseline justify-center"><span class="text-[26px] font-bold mr-1">₹</span>449<span class="text-[13px] font-bold text-white/90 ml-1">/Year</span></div>
                            <span class="bg-white text-[#d90000] text-[12px] font-extrabold px-3.5 py-1 rounded-full inline-block mt-1">Save 34%</span>
                        </div>
                        <ul class="text-[13.5px] font-medium space-y-4">
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> 6 GB NVMe SSD Storage</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> Host 1 Website</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> 2 Subdomains</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> 2 Email Accounts</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> 2 MySQL Databases</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> Free Encrypt SSL</li>
                            <li class="flex items-center border-b border-red-500/30 pb-3"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> cPanel Control Panel</li>
                            <li class="flex items-center"><i class="fa-solid fa-circle-check mr-3 text-[18px]"></i> 24/7 Expert Support</li>
                        </ul>
                    </div>
                    <div class="hm-pro-card-footer">
                        <a href="#" class="hm-pro-btn-solid w-full py-4 rounded-full bg-white text-[#d90000] font-bold text-[15px] flex items-center justify-center gap-2 shadow-md transition-all">
                            Get Started Now <i class="fa-solid fa-arrow-right-long bg-[#d90000] text-white rounded-full w-[26px] h-[26px] flex items-center justify-center text-[11px]"></i>
                        </a>
                    </div>
                </div>

                <!-- Card 3 -->
                <div class="hm-pro-card bg-white shadow-sm hover:shadow-xl border border-gray-100">
                    <div class="hm-pro-card-content">
                        <div class="flex justify-center mb-5"><div class="w-16 h-16 rounded-full bg-red-50 text-[#d90000] flex items-center justify-center"><i class="fa-solid fa-bolt text-[26px]"></i></div></div>
                        <h4 class="text-[24px] font-black text-center text-gray-900">Level 3</h4>
                        <p class="text-[13px] text-gray-500 text-center mb-6">Advanced solution for revenue</p>
                        <div class="text-center mb-6">
                            <span class="text-sm text-gray-400 line-through font-semibold">₹1242 /Year</span>
                            <div class="text-[52px] font-black text-gray-900 my-1 flex items-baseline justify-center"><span class="text-[26px] font-bold mr-1">₹</span>828<span class="text-[13px] font-bold text-gray-500 ml-1">/Year</span></div>
                            <span class="text-[#d90000] text-[13px] font-bold block mt-1">Save 33%</span>
                        </div>
                        <ul class="text-[13.5px] text-gray-700 font-medium space-y-4">
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 9 GB NVMe SSD Storage</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> Host 1 Website</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 3 Subdomains</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 3 Email Accounts</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 2 MySQL Databases</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> Free Encrypt SSL</li>
                            <li class="flex items-center border-b border-gray-100 pb-3"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> cPanel Control Panel</li>
                            <li class="flex items-center"><i class="fa-solid fa-circle-check text-[#d90000] mr-3 text-[18px]"></i> 24/7 Expert Support</li>
                        </ul>
                    </div>
                    <div class="hm-pro-card-footer">
                        <a href="#" class="hm-pro-btn-outline w-full py-4 rounded-full border-2 border-[#d90000] text-[#d90000] font-bold text-[15px] flex items-center justify-center gap-2 transition-all">
                            Get Started Now <i class="fa-solid fa-arrow-right-long border-2 rounded-full w-[26px] h-[26px] flex items-center justify-center text-[11px]"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>

        <!-- Trust Badges -->
        <div class="max-w-[1100px] mx-auto mt-10 bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
            <div class="flex flex-wrap justify-between items-center gap-6">
                <div class="flex items-center gap-3"><i class="fa-solid fa-rocket text-[#d90000] text-3xl"></i><div><h5 class="text-[13px] font-extrabold text-gray-900 mb-0.5">Instant Setup</h5><p class="text-[11px] text-gray-500">Account instantly activated</p></div></div>
                <div class="flex items-center gap-3"><i class="fa-solid fa-shield-halved text-[#d90000] text-3xl"></i><div><h5 class="text-[13px] font-extrabold text-gray-900 mb-0.5">99.99% Uptime</h5><p class="text-[11px] text-gray-500">Reliable hosting online</p></div></div>
                <div class="flex items-center gap-3"><i class="fa-solid fa-cloud-arrow-up text-[#d90000] text-3xl"></i><div><h5 class="text-[13px] font-extrabold text-gray-900 mb-0.5">Free Migration</h5><p class="text-[11px] text-gray-500">We move your website</p></div></div>
                <div class="flex items-center gap-3"><i class="fa-solid fa-headset text-[#d90000] text-3xl"></i><div><h5 class="text-[13px] font-extrabold text-gray-900 mb-0.5">24/7 Support</h5><p class="text-[11px] text-gray-500">Here to help anytime</p></div></div>
            </div>
        </div>

    </section>
</div>