.table-card {
background-color: #f8f9fa; /* Light background for the card */
border: 1px solid #ddd; /* Light border for card outline */
border-radius: 8px; /* Rounded corners */
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for a subtle 3D effect */
margin: 20px auto; /* Center the card with margin */
max-width: 600px; /* Maximum width for the card */
}

.table-card h4 {
font-size: 1.5rem; /* Larger font size for the heading */
color: #333; /* Darker color for the heading */
margin-bottom: 15px; /* Space below the heading */
text-align: center; /* Center the heading text */
}

.table-content {
text-align: center; /* Center align text inside the content */
}

.price-info {
margin-bottom: 20px; /* Space below price info */
}

.price-info .original-price {
font-size: 1.2rem; /* Original price font size */
color: #dc3545; /* Red color for original price */
text-decoration: line-through; /* Strikethrough for original price */
margin-right: 10px; /* Space between prices */
}

.price-info .best-offer {
font-size: 1rem; /* Font size for best offer */
color: #28a745; /* Green color for best offer */
font-weight: bold; /* Bold text for emphasis */
margin-right: 10px; /* Space between offer and discounted price */
}

.price-info .discounted-price {
font-size: 1.5rem; /* Larger font size for discounted price */
color: #007bff; /* Blue color for discounted price */
font-weight: bold; /* Bold text for emphasis */
}

.details-list {
list-style: none; /* Remove default list styling */
padding: 0; /* Remove default padding */
margin: 0; /* Remove default margin */
font-size: 1rem; /* Font size for list items */
color: #555; /* Grey color for text */
line-height: 1.6; /* Line height for readability */
}

.details-list li {
margin-bottom: 10px; /* Space between list items */
}

.btn-primary {
display: inline-block; /* Button as an inline block element */
padding: 10px 20px; /* Padding inside the button */
background-color:#f5f2f2;  /* Blue background color */
color: #fff; /* White text color */
text-decoration: none; /* Remove underline from link */
border-radius: 4px; /* Rounded corners for button */
font-size: 1rem; /* Font size for button text */
font-weight: bold; /* Bold text for emphasis */
transition: background-color 0.3s; /* Smooth background color transition */
margin-bottom: 5px;
}

.btn-primary:hover {
background-color: #16152c; /* Darker blue color on hover */
}

/* Media Query for Medium Screens (Tablets) */
@media (max-width: 768px) {
.table-card {
    padding: 15px; /* Reduce padding on medium screens */
}

.table-card h4 {
    font-size: 1.25rem; /* Adjust font size for heading */
}

.price-info .discounted-price {
    font-size: 1.25rem; /* Adjust font size for discounted price */
}

.btn-primary {
    padding: 8px 16px; /* Adjust padding for button */
    font-size: 0.9rem; /* Adjust font size for button text */
}
}

/* Media Query for Small Screens (Phones) */
@media (max-width: 576px) {
.table-card {
    padding: 10px; /* Reduce padding on small screens */
}

.table-card h4 {
    font-size: 1.1rem; /* Further reduce font size for heading */
}

.price-info .discounted-price {
    font-size: 1.1rem; /* Further reduce font size for discounted price */
}

.details-list {
    font-size: 0.9rem; /* Adjust font size for list items */
}

.btn-primary {
    padding: 6px 12px; /* Further adjust padding for button */
    font-size: 0.9rem; /* Adjust font size for button text */
}
}