:root {
		--bs-primary: rgba(0, 0, 0, 0.623);
		/* Or your desired primary color */
	}

	.btn-primary {
		background-color: rgb(230, 200, 0);
		border-color: rgb(255, 203, 60);
	}


	.btn-primary:hover {
		background-color: #737373;
		border-color: #737373;
	}



	a {
		text-decoration: underline;
		color: rgb(55, 155, 255);
	}

	a:hover {
		text-decoration: underline;
	}

	.active>.page-link,
	.active>.nav-link {
		background-color: var(--bs-primary) !important;
		/* Use !important to ensure override */
		border-color: var(--bs-primary) !important;
		/* Use !important to ensure override */
	}


	.page-link {

		color: var(--bs-primary);

	}


	.sbo-orange {
		color: rgb(235, 89, 18)
	}


	.bg-gradient-subtle {
		background: linear-gradient(to bottom, #000000, #434343);
		/* Gradient from top (black) to bottom (dark grey) */
	}





	.btn-orange {
		background-color: rgb(235, 89, 18);
		/* Orange background */
		border-color: rgb(235, 89, 18);
		/* Slightly darker orange for the border */
		color: white;
		/* White text color for better readability */
	}

	.btn-orange:hover,
	.btn-orange:focus,
	.btn-orange:active {
		background-color: #e65c00;
		/* Slightly darker orange on hover/focus/active */
		border-color: #b34700;
		/* Adjust border color for hover/focus/active */
	}

	.cursor-pointer {
		cursor: pointer;
	}

	.equal-height-img {
		height: 200px;
		/* Adjust this value as needed */
		object-fit: cover;
		/* Keeps the aspect ratio of the image */
	}

	.content {
		max-width: 900px;
		/* or any other width you prefer */
		margin-right: auto;
		margin-left: auto;
	}

	.mt-5 {
		margin-top: 6rem!important;
	}