{% extends "customer_main.html" %}
{%load static%}

{% block modules_section %}
<!-- This block is intentionally left empty to exclude the modules section -->
{% endblock modules_section %}

{% block content %}


<div class="w-full flex flex-col gap-5 mt-5 mb-5">
    <div class="w-full h-fit bg-white rounded-md shadow-md px-5 py-9 flex flex-col justify-center items-center">
        <p class="text-osiblue uppercase text-xl s:text-3xl font-poppinsBold text-center">Shared Hosting</p>

        <!-- PRICING ON DESKTOP -->
        <div class="w-full hidden xlg:grid grid-cols-3 mt-24">
            <div class="w-full h-full border border-gray-200 border-r-transparent p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Shared Basic</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">$2.40/month</p>
                    <p class="text-gray-500">Regular Price: $12.00/month</p>
                </div>

                <a href="">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Single Website</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">15GB SSD Space</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free SSL Certificate</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free Backups</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">DDoS Protection</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">CPanel</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Unlimited Email Account</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free Website Transfer</p>
                        </div>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-3">
                    <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-red-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                            <p class="text-secondosiblue">Performance Boost</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-red-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                            <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-red-500">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                            </svg>
                            <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                        </div>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-3">
                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">WordPress Toolkit</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Getting Started Kit</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Development Tools</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="relative">
                <div
                    class="w-full bg-osiblue text-white text-center px-3 py-3 text-xl absolute -top-[54px] rounded-t-md border border-osiblue font-poppinsBold">
                    <p>Best Value</p>
                </div>

                <div class="border h-full border-osiblue w-full p-9 flex flex-col gap-5 items-center">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Shared Plus</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$4.80/month</p>
                        <p class="text-gray-500">Regular Price: $24.00/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>

                    <div class="w-full flex flex-col gap-3 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">5 Websites</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">25GB SSD Space</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free SSL Certificate</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Backups</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">DDoS Protection</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">CPanel</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Unlimited Email Account</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Website Transfer</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Performance Boost</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Toolkit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Getting Started Kit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Development Tools</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div class="w-full h-full border border-gray-200 p-9 flex flex-col gap-5 items-center">
                <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Shared Power</p>

                <div class="w-full flex flex-col justify-center items-center">
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                    <p class="text-osiblue font-poppinsLight text-xl font-semibold">$46.16/month</p>
                    <p class="text-gray-500">Regular Price: $65.95/month</p>
                </div>

                <a href="">
                    <button
                        class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                        Started
                    </button>
                </a>

                <div class="w-full flex flex-col gap-3 mt-5">
                    <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Unlimited Websites</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">35GB SSD Space</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free SSL Certificate</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free Backups</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">DDoS Protection</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">CPanel</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Unlimited Email Account</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Free Website Transfer</p>
                        </div>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-3">
                    <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Performance Boost</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                        </div>
                    </div>
                </div>

                <div class="w-full flex flex-col gap-3">
                    <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                    <div class="w-full flex flex-col">
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">WordPress Toolkit</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Getting Started Kit</p>
                        </div>
                        <div class="flex justify-start items-center gap-2 py-1">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="w-6 h-6 text-green-600">
                                <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                            </svg>
                            <p class="text-secondosiblue">Development Tools</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- PRICING ON MOBILE -->
        <div class="w-full flex xlg:hidden flex-col gap-10 mt-10">
            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-xl text-center">Basic</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$2.40/month</p>
                        <p class="text-gray-500">Regular Price: $12.00/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col gap-5 p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-3 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Single Website</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">15GB SSD Space</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free SSL Certificate</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Backups</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">DDoS Protection</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">CPanel</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Unlimited Email Account</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Website Transfer</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">Performance Boost</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Toolkit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Getting Started Kit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Development Tools</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full px-5 py-3 text-white text-center font-semibold text-xl bg-osiblue rounded-t-md">
                    <p>Best Value</p>
                </div>

                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Shared Plus</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">80%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$4.80/month</p>
                        <p class="text-gray-500">Regular Price: $24.00/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-osiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-osiblue hover:bg-white hover:text-osiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col gap-5 p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-3 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">5 Websites</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">25GB SSD Space</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free SSL Certificate</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Backups</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">DDoS Protection</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">CPanel</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Unlimited Email Account</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Website Transfer</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Performance Boost</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-500">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
                                </svg>
                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                            </div>
                        </div>
                    </div>

                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>

                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Toolkit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Getting Started Kit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Development Tools</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>


            <div>
                <div class="w-full p-9 border border-gray-200 flex flex-col items-center gap-5 rounded-t-md">
                    <p class="text-secondosiblue uppercase font-poppinsBold text-2xl text-center">Shared Power</p>

                    <div class="w-full flex flex-col justify-center items-center">
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">30%</p>
                        <p class="text-osiblue font-poppinsLight text-xl font-semibold">$46.16/month</p>
                        <p class="text-gray-500">Regular Price: $65.95/month</p>
                    </div>

                    <a href="">
                        <button
                            class="w-fit px-9 py-2 bg-secondosiblue border border-secondosiblue text-white uppercase hover:bg-white hover:text-secondosiblue duration-300">Get
                            Started
                        </button>
                    </a>
                </div>

                <div
                    class="w-full bg-secondosiblue text-white py-3 px-5 text-center flex justify-center items-center gap-2 border border-secondosiblue hover:bg-white hover:text-secondosiblue duration-300 openFeaturesDropdown">
                    <p>View Features</p>
                    <i class="fas fa-angle-down"></i>
                </div>

                <div class="w-full flex flex-col p-5 border border-gray-200 featuresContainer hidden">
                    <div class="w-full flex flex-col gap-3 mt-5">
                        <h1 class="text-gray-500 text-xl font-light">Web Hosting:</h1>
    
                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Unlimited Websites</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">35GB SSD Space</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free SSL Certificate</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Backups</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">DDoS Protection</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">CPanel</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Unlimited Email Account</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Free Website Transfer</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Advanced Features:</h1>
    
                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Performance Boost</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Ultra-fast Cache</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">LiteSpeed with WP Optimization</p>
                            </div>
                        </div>
                    </div>
    
                    <div class="w-full flex flex-col gap-3">
                        <h1 class="text-gray-500 text-xl font-light">Essential Features:</h1>
    
                        <div class="w-full flex flex-col">
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">WordPress Toolkit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Getting Started Kit</p>
                            </div>
                            <div class="flex justify-start items-center gap-2 py-1">
                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                    stroke="currentColor" class="w-6 h-6 text-green-600">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                                </svg>
                                <p class="text-secondosiblue">Development Tools</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!---------------------- JS SCRIPTS -------------------->
<script type="text/javascript" src='{% static "js/customer_dashboard/pricing-dropdown.js" %}'></script>


{% endblock %}