@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

:root {
  --cb-navy: #12355B;
  --cb-blue: #1464B4;
  --cb-sun: #FFBD59;
  --cb-ivory: #FAF8F4;
  --cb-charcoal: #20252A;
}

html,
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--cb-charcoal);
  background-color: var(--cb-ivory);
}

body {
  letter-spacing: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
button,
a,
input,
select,
textarea {
  font-family: 'Montserrat', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--cb-navy);
}

.bg-gray-50,
.bg-slate-50 {
  background-color: var(--cb-ivory) !important;
}

.bg-white {
  background-color: #fff !important;
}

.bg-gray-900,
.bg-slate-900,
.bg-sky-900 {
  background-color: var(--cb-navy) !important;
}

.bg-sky-600,
.bg-blue-600 {
  background-color: var(--cb-blue) !important;
}

.hover\:bg-sky-700:hover,
.hover\:bg-blue-700:hover {
  background-color: var(--cb-navy) !important;
}

.text-gray-900,
.text-slate-900,
.text-sky-950,
.text-sky-900 {
  color: var(--cb-navy) !important;
}

.text-gray-800,
.text-slate-800,
.text-gray-700,
.text-slate-700 {
  color: var(--cb-charcoal) !important;
}

.text-gray-600,
.text-slate-600,
.text-gray-500,
.text-slate-500 {
  color: #53606B !important;
}

.text-sky-600,
.text-sky-700,
.text-blue-600 {
  color: var(--cb-blue) !important;
}

.border-gray-100,
.border-gray-200,
.border-slate-100,
.border-slate-200,
.border-slate-200\/80 {
  border-color: #E3E8EC !important;
}

.bg-amber-400,
.bg-amber-100 {
  background-color: var(--cb-sun) !important;
}

.text-amber-700,
.text-amber-900 {
  color: #9A6500 !important;
}

.text-amber-400 {
  color: var(--cb-sun) !important;
}

.bg-sky-50,
.bg-sky-100 {
  background-color: #E8F2FA !important;
}

.bg-emerald-50,
.bg-emerald-100 {
  background-color: #EAF3EE !important;
}

.text-emerald-700,
.text-emerald-800 {
  color: #286044 !important;
}

.brand-script {
  font-family: 'Playlist Script', 'Brush Script MT', cursive;
}

@media (max-width: 767px) {
  .mobile-swipe-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    color: var(--cb-blue);
  }

  .mobile-swipe-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 9999px;
    background-color: #c5d2dc;
  }

  .mobile-swipe-dot-active {
    width: 1.25rem;
    border-radius: 9999px;
    background-color: var(--cb-blue);
  }

  .mobile-swipe-arrow {
    margin-left: 0.25rem;
    font-size: 1.25rem;
    line-height: 1;
  }
}

::selection {
  color: #fff;
  background-color: var(--cb-blue);
}