@font-face {
  font-family: "Cabin Sketch";
  src: url("../fonts/CabinSketch-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin Sketch";
  src: url("../fonts/CabinSketch-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Valley Sans";
  src: url("../fonts/ValleySans-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Valley Sans";
  src: url("../fonts/ValleySans-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root{
  --bingo-navy:#1f4a73;
  --bingo-navy-dark:#173956;
  --bingo-gold:#ffd84d;
  --bingo-text:#18324a;
}

html,
body {
  min-height: 100%;
}

body{
	min-height: 100vh;
  display: flex;
  flex-direction: column;
  color:var(--bingo-text);
  background:#fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.site-header{
  background:var(--bingo-navy);
}

.brand-title{
  line-height:1;
  font-weight:600;
	font-size:1.6rem !important;
}

.brand-subtitle{
	font-family:"Cabin Sketch", cursive;
  font-weight:500;
  font-size:.82rem;
  opacity:.95;
	
}

.site-header .nav-link{
  color:#fff !important;
  font-weight:700;
  text-transform:uppercase;
  font-size:.75rem;
  position:relative;
  padding-top:1.15rem !important;
  padding-bottom:1.15rem !important;
}

.site-header .nav-link.active::after{
  content:"";
  position:absolute;
  left:.55rem;
  right:.55rem;
  bottom:0;
  height:3px;
  background:var(--bingo-gold);
}

.btn-bingo{
  background:var(--bingo-gold);
  border-color:var(--bingo-gold);
  color:#111;
  font-weight:500;
	font-size:0.8em;
}

.btn-bingo:hover{
  background:#ffcf24;
  border-color:#ffcf24;
  color:#111;
}

.hero{
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.99) 0%,
      rgba(255,255,255,.75) 62%,
      rgba(255,255,255,.25) 100%
    ),
    url("../images/hero-bg.png") center center / cover no-repeat fixed;
}

.hero-eyebrow{
  color:#e8a900;
  letter-spacing:.04em;
  font-weight:700;
  text-transform:uppercase;
}

.hero-title{
  font-size:clamp(30px, 1.875rem + ((1vw - 3.2px) * 1.563), 50px);
  line-height:0.8;
  font-weight:700;
}

.hero-tagline{
  font-size: clamp(16.293px, 1.018rem + ((1vw - 3.2px) * 0.68), 25px);
  font-weight:700;
}

.hero-tagline .accent{
  color:#e5a400;
}

.feature-panel{
  margin-top:0;
  position:relative;
  z-index:3;
  border-radius:1rem;
  box-shadow:0 12px 30px rgba(22,57,86,.12);
}

.feature-item{
  min-height:auto;
}

.feature-item + .feature-item{
  border-left:0;
  border-top:1px solid #e6edf4;
}

.offcanvas{
  background:var(--bingo-navy-dark);
  color:#fff;
}

.offcanvas .nav-link{
  padding:.8rem 0 !important;
  font-size:1rem;
}

.icon svg {
	display: block;
  width: 100%;
  height: 100%;
}

.bingo-tabs .nav-link {
  border-bottom: 3px solid transparent;
  border-radius: .375rem .375rem 0 0;
  color: var(--bingo-navy);
  margin-bottom: -1px;
}

.bingo-tabs .nav-link.active {
  border-bottom-color: var(--bingo-gold);
  background-color: var(--bs-light);
  color: var(--bingo-navy);
}

.bingo-scroll {
  overflow-x: auto;
}

.bingo-grid {
  min-width: 720px;
}