/* General Button Styles */
.btn {
    display: inline-block;
    padding: 10px 20px;         /* Adjust padding for button */
    font-size: 16px;            /* Font size */
    font-weight: 600;           /* Bold font */
    border-radius: 5px;         /* Rounded corners */
    text-align: center;         /* Center text */
    text-decoration: none;      /* Remove underline */
    cursor: pointer;           /* Pointer on hover */
    transition: all 0.3s ease;  /* Smooth transition for hover effect */
    border: none;               /* Remove border */
    outline: none;              /* Remove outline */
}

/* Primary Button */
.btn-primary {
    background-color: #007bff;    /* Blue background */
    color: white;                 /* White text */
}

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

/* Danger Button */
.btn-danger {
    background-color: #dc3545;    /* Red background */
    color: white;                 /* White text */
}

.btn-danger:hover {
    background-color: #c82333;    /* Darker red on hover */
}

/* Success Button */
.btn-success {
    background-color: #28a745;    /* Green background */
    color: white;                 /* White text */
}

.btn-success:hover {
    background-color: #218838;    /* Darker green on hover */
}

/* Warning Button */
.btn-warning {
    background-color: #ffc107;    /* Yellow background */
    color: black;                 /* Black text */
}

.btn-warning:hover {
    background-color: #e0a800;    /* Darker yellow on hover */
}

/* Info Button */
.btn-info {
    background-color: #17a2b8;    /* Teal background */
    color: white;                 /* White text */
}

.btn-info:hover {
    background-color: #117a8b;    /* Darker teal on hover */
}

/* Light Button */
.btn-light {
    background-color: #f8f9fa;    /* Light background */
    color: black;                 /* Black text */
}

.btn-light:hover {
    background-color: #e2e6ea;    /* Darker light background on hover */
}

/* Dark Button */
.btn-dark {
    background-color: #343a40;    /* Dark background */
    color: white;                 /* White text */
}

.btn-dark:hover {
    background-color: #23272b;    /* Darker dark background on hover */
}

/* Link Style Button */
.btn-link {
    background-color: transparent; /* Transparent background */
    color: #007bff;                /* Blue text */
    text-decoration: underline;     /* Underline text */
    padding: 0;                     /* Remove padding */
    border: none;                   /* No border */
}

.btn-link:hover {
    color: #0056b3;                 /* Darker blue text on hover */
    text-decoration: none;          /* Remove underline on hover */
}