/* Custom colors for Bootstrap */
:root {
    --bs-primary: #3c208f;   /* Change to your desired primary color */
    --bs-secondary: #6c757d; /* Change to your desired secondary color */
    --bs-success: #61a095;   /* Change to your desired success color */
    --bs-danger: #c72a56;    /* Change to your desired danger color */
    --bs-warning: #ffc107;   /* Change to your desired warning color */
    --bs-info: #17a2b8;      /* Change to your desired info color */

    --bs-primary-hover: #2c107f;   /* Darker shade for primary on hover */
    --bs-secondary-hover: #5a6268; /* Darker shade for secondary on hover */
    --bs-success-hover: #519085;   /* Darker shade for success on hover */
    --bs-danger-hover: #b71a46;    /* Darker shade for danger on hover */
    --bs-warning-hover: #e0a800;   /* Darker shade for warning on hover */
    --bs-info-hover: #138496;      /* Darker shade for info on hover */
}

.btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover {
    background-color: var(--bs-primary-hover);
    border-color: var(--bs-primary-hover);
}

.btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.btn-secondary:hover {
    background-color: var(--bs-secondary-hover);
    border-color: var(--bs-secondary-hover);
}

.btn-success {
    background-color: var(--bs-success);
    border-color: var(--bs-success);
}

.btn-success:hover {
    background-color: var(--bs-success-hover);
    border-color: var(--bs-success-hover);
}

.btn-danger {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover {
    background-color: var(--bs-danger-hover);
    border-color: var(--bs-danger-hover);
}

.btn-warning {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
}

.btn-warning:hover {
    background-color: var(--bs-warning-hover);
    border-color: var(--bs-warning-hover);
}

.btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
}

.btn-info:hover {
    background-color: var(--bs-info-hover);
    border-color: var(--bs-info-hover);
}

.bg-primary {
    background-color: var(--bs-primary) !important;
}

.bg-secondary {
    background-color: var(--bs-secondary) !important;
}

.bg-success {
    background-color: var(--bs-success) !important;
}

.bg-danger {
    background-color: var(--bs-danger) !important;
}

.bg-warning {
    background-color: var(--bs-warning) !important;
}

.bg-info {
    background-color: var(--bs-info) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

.text-success {
    color: var(--bs-success) !important;
}

.text-danger {
    color: var(--bs-danger) !important;
}

.text-warning {
    color: var(--bs-warning) !important;
}

.text-info {
    color: var(--bs-info) !important;
}

.border-primary {
    border-color: var(--bs-primary) !important;
}

.border-secondary {
    border-color: var(--bs-secondary) !important;
}

.border-success {
    border-color: var(--bs-success) !important;
}

.border-danger {
    border-color: var(--bs-danger) !important;
}

.border-warning {
    border-color: var(--bs-warning) !important;
}

.border-info {
    border-color: var(--bs-info) !important;
}