@font-face {
  font-family: 'Open Sans';
  src: url('/fonts/OpenSans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  	--brand-orange: #ff7a00;
  	--brand-orange-600: #e66d00;
	--brand-gray: #4f4f4f;
	--brand-gray-200: #f2f2f2;
	--brand-dark: #151515;
}

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

.bg-brand {
	background: var(--brand-orange)!important;
	color: #fff;
}

.btn-brand {
	--bs-btn-bg: var(--brand-orange);
	--bs-btn-border-color: var(--brand-orange);
	--bs-btn-color: white;

	--bs-btn-hover-bg: var(--brand-orange-600);
	--bs-btn-hover-border-color: var(--brand-orange-600);
	--bs-btn-hover-color: #fff;

	--bs-btn-active-bg: var(--brand-orange-600);
	--bs-btn-active-border-color: var(--brand-orange-600);
	--bs-btn-active-color: #fff;

	--bs-btn-focus-shadow-rgb: 255, 122, 0;
}

.link-brand {
	color: var(--brand-orange);
	text-decoration: none;
  	font-weight: 500;
}

.link-brand:hover {
	color: var(--brand-orange-600);
}

.section-muted {
	background: var(--brand-gray-200);
}

.shadow-soft {
	box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.store-card .badge {
	font-weight: 600;
}

.card-hover {
    transition: transform 0.3s ease-in-out;
}

.card-hover:hover {
	transform: scale(1.05);
}

#faq .accordion-button:not(.collapsed) {
	background-color: #fee8a6;
	color: #111;
	box-shadow: none;
}

#faq .accordion-button:focus {
	box-shadow: 0 0 0 .25rem rgba(255,193,7,.25);
	border-color: #ffc107;
}

#faq .accordion-button::after {
	background-image: var(--bs-accordion-btn-icon);
}

#faq .accordion-button:not(.collapsed)::after {
	background-image: var(--bs-accordion-btn-active-icon);
	filter: hue-rotate(-20deg) brightness(1.3);
}

.fade-in {
  	opacity: 0;
  	transform: translateY(6px);
  	transition: opacity .25s ease, transform .25s ease;
}

.fade-in.appear {
  	opacity: 1;
  	transform: none;
}

.nju-slide, .nju-hero {
	background-color: #002B45;
}

.nju-slide h2, 
.nju-slide p, 
.nju-slide .badge,
.nju-slide a,
.nju-slide i {
	z-index: 2;
	position: relative;
}

@media (min-width: 992px) {
	.b2b-image {
		max-width: 75%;
		height: auto;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 991.98px) {
	.b2b-image {
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
}