.container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    padding: 24px;
    font-family: 'Poppins', sans-serif;
    color: #848199;
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
    line-height: normal;
}

.plan {
    min-height: 300px;
    padding: 26px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    border-radius: 26px;
    background: rgba(243, 235, 234, 0.50);
    backdrop-filter: blur(17.5px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.plan-price{
    color: #231D4F;
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
}


.per-month {
    font-size: 17px;
}

.plan:hover {
    transform: translateY(-5px);
}

.plan-title {
    color: #231D4F;
    font-size: 28px;
    font-style: normal;
    line-height: normal;
}

.bullet-points {
    font-size: 15px;
    list-style-type: none;
    padding-left: 0;
}

.bullet-points li {
    padding-left: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 20 20" fill="none"> <path d="M10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C19.9936 4.47982 15.5202 0.00642897 10 0Z" fill="%235243C2" fill-opacity="0.15"/> <path d="M15.7725 6.83331L10.0684 14.5741C9.93234 14.7546 9.72948 14.8729 9.50539 14.9024C9.2813 14.9318 9.05478 14.87 8.87671 14.7308L4.80338 11.4741C4.44393 11.1865 4.38573 10.6619 4.67338 10.3025C4.96102 9.94303 5.4856 9.88483 5.84504 10.1725L9.24171 12.89L14.4309 5.84748C14.601 5.59214 14.8978 5.45096 15.2032 5.48001C15.5087 5.50906 15.7735 5.70362 15.8925 5.98646C16.0115 6.26929 15.9654 6.59463 15.7725 6.83331Z" fill="%23BB6BD9"/></svg>'); /* Insert your SVG here */
    background-repeat: no-repeat;
    background-size: 16px 16px;
    background-position: 0 5px;
}

.buy-now {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: auto;
}

.buy-now button {
    box-sizing: border-box;
    border-radius: 24px;
    margin-top: auto;
    background: #231D4F;
    border: 2px solid transparent;
    color: #ffffff;
    padding: 8px 16px;
    font-size: 18px;
    width: 100%;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.buy-now button:hover {
    background-color: #ffffff;
    color: #231D4F;
    border-color: #231D4F;
}

@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
        padding: 16px;
    }
}