@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,560;9..144,700&family=Outfit:wght@400;500;600;700&display=swap");

body {
  background: #f6f3ec !important;
  color: #1e1a16 !important;
  font-family: Outfit, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  overflow-x: hidden;
}
#page-wrapper { margin-left: 250px; }
h1, h2, h3, h4, h5 {
  font-family: Fraunces, Georgia, serif !important;
  letter-spacing: -0.03em !important;
  color: #143d32 !important;
}
.headnav {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 250px;
  overflow: auto;
  z-index: 40;
  background: #10281f;
}
.topnav, .main-menu {
  background: transparent !important;
  border-bottom: 0 !important;
}
.mtoplogo, .mtoplogo.d-flex {
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
}
.headnav .logo, .headnav img { max-width: 160px !important; height: auto !important; }
.menu {
  flex-direction: column !important;
  align-items: stretch;
  gap: 2px;
  padding: 8px 12px 24px !important;
}
.menu > li a {
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px;
  padding: 8px 12px !important;
  font-size: 13px !important;
  text-transform: none !important;
}
.menu > li.active a, .menu > li:hover > a { color: #143d32 !important; background: #f3efe6; border: 0 !important; }
.p-list, .mcta { justify-content: flex-start !important; flex-direction: column !important; align-items: stretch !important; width: 100%; }
.abovenav { padding: 10px 12px 0; }
.abovenav, .abovenav ul { text-align: left !important; justify-content: flex-start !important; display: flex !important; flex-direction: column !important; gap: 2px; }
.abovenav a { color: #e7f2ec !important; }
a.btn-signup, a.btn-login, a.cta-button, a.tnav.btn-signup, a.tnav.btn-login {
  position: relative;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: #143d32 !important;
  border: 2px solid #143d32 !important;
  box-shadow: 4px 4px 0 #b8612d !important;
  padding: 8px 14px 8px 30px !important;
  text-transform: uppercase;
}
a.btn-signup::before, a.btn-login::before, a.cta-button::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
a.btn-login, a.tnav.btn-login {
  background: #f6f3ec !important;
  color: #10281f !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
a.btn-signup, a.tnav.btn-signup, a.cta-button {
  background: #c4622d !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}
.headnav a.btn-login, .headnav a.btn-signup { width: 100%; display: block; text-align: center; }
section > picture { display: block; text-align: left; }
section > picture img, img.d-block.mx-auto {
  width: min(100%, 640px) !important;
  margin: 16px 0 !important;
  border: 0 !important;
  border-radius: 16px;
}
.promos .card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch;
  overflow: hidden;
}
.promos .card > a { flex: none; width: 100%; }
.promos .card-img-top { width: 100% !important; height: 100%; object-fit: cover; border-radius: 0 !important; }
.promo-cta { text-align: left !important; }
.trigger-mmenu .icon span { border-radius: 0 !important; }
.welcomebg, .pages, .promos .card, .promos .card-body {
  background: #fffdf8 !important;
  color: #1e1a16 !important;
  border: 1px solid #e6dccb !important;
  border-radius: 22px !important;
}
.welcomebg { padding: 36px 22px !important; border-left: 0 !important; }
.welcomebg h1, .welcomebg h2, .welcomebg p,
.promos .card-title, .promos .card-body, .promos p { color: #1e1a16 !important; }
.subsection { padding: 48px 0 !important; }
.footer {
  background: #143d32 !important;
  border-top: 0 !important;
  color: #f3efe6 !important;
}
.footer h4, .footer p, .footer a, .ftcopy { color: #f3efe6 !important; }
img { max-width: 100%; height: auto; }
.logo img { width: 72px !important; height: auto !important; }
@media (max-width: 768px) {
  #page-wrapper { margin-left: 0; }
  .headnav { position: static; width: 100%; bottom: auto; }
  .menu { display: none; }
  .main-menu { background: #fffdf8 !important; }
}
