/* =========================
   FONT
   ========================= */

/* FIX: If this is a *static* "Regular" OTF (most likely), do NOT use variable ranges.
   Use a single weight. Add additional @font-face blocks if you have Bold/Black files. */
@font-face {
  font-family: 'Manop';
  src: url('/fonts/fonnts.com-Manop_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================
   GLOBAL
   ========================= */

:root {
  --black: #000;
  --white: #fff;
  --overlay-bg: rgba(0, 0, 0, 0.6);

  /* FIX: Combined both :root blocks into one (cleaner, avoids confusion) */
  --cc-deep-teal: #022f3d;
  --cc-ink: #0b2f3b;
  --cc-cream: #f3cfb2;
  --cc-red: #C23C32;
  --cc-card-radius: 34px;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body,
html {
  font-family: 'Manop', sans-serif;
  height: 100%;
  color: #322923;
  background: #f6d0b3;
}

/* =========================
   LAYOUT / TYPOGRAPHY
   ========================= */

footer {
  height: 7vh;
  text-align: center;
  padding: 0rem 1rem;
  margin-top: 30px;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  background: #322923;
  padding: 20px 0;
}

.header .main-logo {
  display: block;
  width: 250px;
  margin: 0 auto;
}

.main-body {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 0px;
}

h1,
h2 {
  font-weight: 900;
  font-family: 'Manop', sans-serif;
  text-align: center;
}

/* NOTE: font-stretch only has effect if the font supports width axis or has stretched faces */
h1,
h2 {
  font-stretch: 50%;
}

h1 {
  font-size: 7em;
  line-height: 1em;
  margin-top: 1em;
  font-weight: 900;
}

h2 {
  /* FIX: removed extra semicolon */
  font-size: 4em;
}

p {
  font-size: 2.2em;
  text-align: center;
  font-weight: 500;
  margin-top: 0.5em;
}

#dose-video-section {
  margin-top: 30px;
}

.section a.button {
  display: block;
  background: #c23c32;
  color: #fff;
  width: fit-content;
  padding: 5px 10px;
  text-decoration: none;
  margin: 10px auto;
  font-size: 0.9em;
  font-weight: 600;
}

.section img {
  max-width: 1000px;
  width: 95%;
  margin: 0 auto;
  display: block;
  margin-top: 30px;
}

.section img.mobileweb {
  display: none;
}

footer a {
  color: #322923;
  display: inline-block;
  padding: 0 6px;
}

.section img.cc-dosing-scale {
  max-width: 1000px;
  width: 90%;
  margin-top: 20px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#dose-scale-section {
  margin-bottom: 30px;
}

/* Mobile Styles */
@media (max-width: 7640px) {
  h1 {
    font-size: 5em;
    max-width: 100%;
    margin: auto;
    margin-top: 1em;
    display: block;
    line-height: 1em;
    padding-bottom: 0px;
  }

  p {
    font-size: 2em;
    line-height: 1.2em;
    max-width: 90%;
    margin: auto;
    margin-top: .5em;
  }

  .cta-button {
    font-size: 1.5rem;
    width: 250px;
  }

  .header .main-logo {
    width: 200px;
  }

  .header {
    padding: 10px 0;
  }

  .gate-button {
    font-size: 1.2rem;
    max-width: 12rem;
  }
}