button {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    font-size: inherit; /* Inherit font size to match anchor tags */
}

a.btn, button.btn {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    line-height: normal;
    border-radius: 5px;
}

.btn-sm {
	padding: 6px 10px;
	font-size: 0.875rem;
}

.btn-ex-sm {
	padding: 3px 4px;
	font-size: 0.75rem;
}

button.btn {
	padding-bottom: +4px;
}

.btn-reg,  button.btn-reg{
    padding: 8px 12px;
	font-size: 1rem;
}

.btn-orange {
	background-color: var(--highlight-color);
	color: var(--primary-color);
}

.btn-orange:hover {
	background-color: var(--highlight-color);
	color: var(--text-light);
}

.btn-success {
	background-color: var(--accent-color);
	color: var(--text-light);
}

.btn-success:hover {
	background-color: var(--secondary-color);
	color: var(--text-light);
}

.btn-primary {
	background-color: var(--accent-color);
	color: var(--text-light);
}

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

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-light);
}


@media (max-width: 768px) {
    .btn {
        font-size: 1.1rem;
        padding: 14px 24px;
    }
}