.btn-primary, .btn-danger {
    padding: 5px 10px; /* Adjust padding for better size */
    font-size: 18px; /* Font size */
    font-weight: 600; /* Slightly bolder text */
    color: black; /* Default text color */
    background-color: white; /* White background */
    border: 1px solid; /* 2px border */
    text-decoration: none; /* Remove underline from links */
    text-align: center;
    border-radius: 25px; /* Rounded corners */
    display: inline-flex; /* Enables flexbox layout inside the button */
    justify-content: center; /* Centers text horizontally */
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.btn-primary {
    border: 1px solid #007bff;
}

.btn-primary:hover {
    background-color: #007bff; /* Blue background on hover */
    color: white; /* White text on hover */
    transform: translateY(-2px); /* Slightly lift on hover */
}

.btn-danger {
    border-color: #dc3545; /* Red border */
}

.btn-danger:hover {
    background-color: #dc3545; /* Red background on hover */
    color: white; /* White text on hover */
    transform: translateY(-2px); /* Slightly lift on hover */
}

.btn-primary:focus {
    outline: none; /* Remove focus outline */
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5); /* Focus ring for accessibility */
}

.btn-danger:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5); /* Red focus ring for .btn-danger */
}

.btn-primary.active {
    background-color: #007bff; /* Blue background for active button */
    color: white; /* White text for active button */
    border-color: #007bff; /* Blue border for active button */
}