body {
    background-color: #f3f4f6; /* Light neutral background for clarity */
    font-family: 'Roboto', sans-serif;
    color: #3a3a3a; /* Darker text for readability */
}

h1 {
    color: #4a90e2; /* Soft blue for a friendly tone */
    font-weight: bold;
    text-transform: capitalize;
}

.card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #ffffff; /* Clean white background for cards */
    color: #4a4a4a; /* Neutral text color */
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Softer hover effect */
}

.card-header {
    text-align: center;
    padding: 15px;
    font-size: 1.4rem; /* Slightly larger font size */
    font-weight: bold;
    background: linear-gradient(45deg, #6ec1e4, #a8e1ff); /* Gentle gradient for fun */
    color: #ffffff;
    border-bottom: none;
}

.card-body {
    padding: 20px;
    line-height: 1.7; /* Comfortable line spacing */
    color: #505050; /* Medium gray for text */
}

.card-footer {
    font-size: 0.9rem;
    padding: 10px;
    background-color: #f8f9fa; /* Soft gray footer */
    color: #6c757d;
}

.text-success {
    color: #28a745 !important; /* Calm green for success */
    font-weight: bold;
}

.text-danger {
    color: #dc3545 !important; /* Subtle red for danger */
    font-weight: bold;
}

.text-muted {
    color: #7a7a7a !important; /* Muted gray for subtle details */
}

.btn-primary:hover {
    background-color: #4a90e2; /* Slightly deeper blue on hover */
}

.custom-button {
    background-color: #cce4ff; /* Slightly brighter blue */
    color: #004085; /* Darker text for contrast */
    border: 1px solid #99c8f7; /* Slightly stronger border */
    padding: 0.25rem 0.75rem; /* Compact padding */
    font-size: 0.875rem; /* Slightly smaller text */
    line-height: 1.5; /* Balanced line height */
    border-radius: 20px; /* Rounded-pill style */
    margin-left: 0.5rem; /* Space from text */
    vertical-align: middle; /* Align with the text line */
    font-weight: 500; /* Slightly bolder text */
}

.custom-button:hover {
    background-color: #b3d8ff; /* Slightly darker blue on hover */
    color: #003366; /* Darker text on hover */
}