.pricing-card {
    background-color: white;
    border-radius   : 12px;
    box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow        : hidden;
    transition      : all 0.3s ease;
    text-align      : center;
    margin-bottom   : 30px;
}

.pricing-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    transform : translateY(-10px);
}

.plan-header {
    background-color       : #333;
    color                  : white;
    padding                : 20px 0;
    font-size              : 24px;
    font-weight            : bold;
    border-top-left-radius : 12px;
    border-top-right-radius: 12px;
}

.plan-header p {
    font-size : 18px;
    margin-top: 10px;
}

.plan-body {
    padding: 20px;
}

.plan-body ul {
    list-style: none;
    padding   : 0;
    font-size : 16px;
    color     : #555;
}

.plan-body ul li {
    margin         : 10px 0;
    display        : flex;
    justify-content: center;
    align-items    : center;
}

.plan-body ul li:before {
    content     : "✓";
    color       : #00B4D8;
    margin-right: 10px;
}

.plan-footer {
    padding                   : 20px;
    background-color          : #f9f9f9;
    border-bottom-left-radius : 12px;
    border-bottom-right-radius: 12px;
}

.price {
    font-size  : 28px;
    font-weight: bold;
    color      : #333;
}

.price span {
    font-size: 16px;
    color    : #777;
}

/* Purchase Button Styling */
.purchase-btn {
    background-color: #00B4D8;
    /* Default background color */
    color           : white;
    /* Text color */
    padding         : 18px 25px;
    /* Padding for better spacing */
    font-size       : 16px;
    /* Font size */
    font-weight     : bold;
    /* Make the text bold */
    border-radius   : 5px;
    /* Rounded corners */
    text-decoration : none;
    /* Remove underline */
    transition      : all 0.3s ease;
    /* Smooth transition on hover */
    margin-top      : 15px;
    /* Margin at the top */
    border          : none;
    /* Remove border */
    text-transform  : uppercase;
    /* Uppercase text */
}

/* Hover Effect for Purchase Button */
.purchase-btn:hover {
    background-color: #0288d1;
    /* Darker blue for hover effect */
    color           : #fff;
    /* Ensure text remains white */
    box-shadow      : 0 4px 15px rgba(0, 0, 0, 0.2);
    /* Subtle shadow on hover */
    transform       : translateY(-2px);
    /* Slight lift effect */
}

/* Specific color styling for different plans */
.easy-plan .purchase-btn {
    background-color: #00B4D8;
    /* Blue */
}

.basic-plan .purchase-btn {
    background-color: #20B2AA;
    /* Light Sea Green */
}

.bronze-plan .purchase-btn {
    background-color: #8B4513;
    /* Saddle Brown */
}

.silver-plan .purchase-btn {
    background-color: #C0C0C0;
    /* Silver */
}

.gold-plan .purchase-btn {
    background-color: #FFD700;
    /* Gold */
}

.gold-plus-plan .purchase-btn {
    background-color: #FF8C00;
    /* Dark orange for Gold Plus */
}

.platinum-plan .purchase-btn {
    background-color: #A9A9A9;
    /* Gray for Platinum */
}

.diamond-plan .purchase-btn {
    background-color: #00BFFF;
    /* Deep Sky Blue for Diamond */
}


.easy-plan {
    border-left: 6px solid #00B4D8;
}

.basic-plan {
    border-left: 6px solid #20B2AA;
}

.bronze-plan {
    border-left: 6px solid #8B4513;
}

.silver-plan {
    border-left: 6px solid #C0C0C0;
}

.gold-plan {
    border-left: 6px solid #FFD700;
}

/* For the Gold Plus plan */
.gold-plus-plan {
    border-left: 6px solid orangered;
    /* Gold border for Gold Plus */
}

/* For the Platinum plan */
.platinum-plan {
    border-left: 6px solid #A9A9A9;
    /* Platinum gray border for Platinum */
}

.diamond-plan {
    border-left: 6px solid #00BFFF;
}