Payment plan Calculator CSS style

.payment-plans {

    margin-top: 20px;

    padding: 15px;

    background-color: #fff;

    border: 1px solid #ddd;

    border-radius: 8px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    justify-content: center;

}

.payment-plans h3 {

    font-size: 20px;

    font-weight: bold;

    margin-bottom: 10px;

    color: #333;

    width: 100%;

    text-align: center;

}

.payment-plan {

    font-size: 14px;

    color: #333;

    padding: 6px 12px; /* Reduced padding for more compactness */

    border-radius: 6px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background-color: #f7f7f7;

    width: 90px; /* Smaller width */

    text-align: center;

    transition: all 0.3s ease-in-out;

}

.payment-plan:hover {

    background-color: #e8e8e8;

}

.plan-title {

    font-size: 12px; /* Smaller text */

    font-weight: bold;

    margin-bottom: 4px;

}

.plan-price {

    font-size: 14px; /* Smaller price text */

    color: #2c3e50;

}

/* Specific styles for each payment plan */

.payment-plan.12_month {

    background-color: #e0f7fa;

}

.payment-plan.24_month {

    background-color: #fff3e0;

}

.payment-plan.36_month {

    background-color: #e8f5e9;

}

.payment-plan.48_month {

    background-color: #fce4ec;

}

.payment-plan.60_month {

    background-color: #f3e5f5;

}

/* Responsive design for mobile devices: Show 3 cubes per row */

@media (max-width: 768px) {

    .payment-plan {

        width: 30%; /* 3 cubes per row on mobile */

        font-size: 12px; /* Smaller font size on mobile */

    }

}