:root {
	--brand-color: #009eff;

	--bs-border-radius: 0.25rem;
}

.text-color-brand {
	color: var(--brand-color);
}

.text-muted {
	color: currentColor!important;
	opacity: 0.6;
}

.fs-small {
	font-size: 0.875rem;
}

.nowrap {
	white-space: nowrap;
}

.hero-image {
	color: white;
	background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(/static/img/messy-desk.jpg) 50% 50%;
	background-size: cover;
	border-top: 4px solid var(--brand-color);
	border-bottom: 4px solid var(--brand-color);

}

.hero-image .container {
	padding-top: 5rem;
	padding-bottom: 5rem;
	text-shadow: 0 0 5px black, 0 0 5px black, 0 0 10px black, 0 0 10px black;
}

.hero-image .btn-cta {
	text-shadow: none;
}

.services {
	border-top: 4px solid var(--brand-color);
	border-bottom: 4px solid var(--brand-color);

}

.contact-link {
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px dotted currentColor;
}

.footer {
	border-top: 4px solid var(--brand-color);
}

.btn-dynamic {
	--btn-base: var(--bs-dark);
	--btn-hover-mix: 80%;
	--btn-active-mix: 70%;

    --bs-btn-color: #fff;
    --bs-btn-bg: var(--btn-base);
    --bs-btn-border-color: var(--btn-base);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in oklch, var(--btn-base) var(--btn-hover-mix), black);
    --bs-btn-hover-border-color: color-mix(in oklch, var(--btn-base) var(--btn-hover-mix), black);
    --bs-btn-focus-shadow-rgb: 228, 128, 60;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: color-mix(in oklch, var(--btn-base) var(--btn-active-mix), black);
    --bs-btn-active-border-color: color-mix(in oklch, var(--btn-base) var(--btn-active-mix), black);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: color-mix(in oklch, var(--btn-base) 50%, black);
    --bs-btn-disabled-border-color: color-mix(in oklch, var(--btn-base) 50%, black);
}

.btn-cta {
	--btn-base: var(--brand-color);
}

.mobile-break {
	display: none;
}

.desktop-break {
	display: inline;
}

@media (max-width: 768px) {
	.mobile-break {
		display: inline;
	}
	.desktop-break {
		display: none;
	}

	.hero-image .fs-1 {
		font-size: 1.55rem!important;
	}
}