@font-face {
  font-family: 'Manop';
  src: url('../fonts/fonnts.com-Manop_Regular.otf') format('opentype');
 font-weight: 100 900; /* Range for variable weight */
  font-stretch: 50% 200%; /* Range for variable width */
  font-style: normal;
}

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

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

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

    .hero {
      height: 93vh;
      background-size: 100% 100%;
      background-position: 100% 100%;
      background-repeat: no-repeat;
      position: relative;
    }
    .cta-button {
      background-color: #c23c32;
      color: #fff;
      text-decoration: none;
      margin: 0 auto;
      display: block;
      width: 300px;
      text-align: center;
      padding: 1rem 2rem;
      font-size: 2rem;
      font-weight: 700;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: background 0.3s;
    }
    .cta-button:hover {
      background-color: #a02822;
    }

    /* Desktop image */
    .hero {
      background-image: url('../../assets/images/image (17).png'); /* Replace with your desktop image */
    }

   

    .h-gate {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: var(--overlay-bg);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 999;
    }

    .gate-box {
   background-color: #c23c32;
      border-radius: 1rem;
      width: 90%;
          max-width: 30rem;
    height: 45vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    }

    .gate-logo {
      max-width: 6rem;
      height: auto;
      margin: 0 auto 0rem;
    }

    .gate-text {
 
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 1rem;
        color: #fff;
        text-align: center;
    }
    
    .gate-text1 {
    font-size: 1.2rem;
    font-weight: 550;
    margin-bottom: 1.5rem;
    color: #fff;
    text-align: center;
}

.highlight-offer {
    font-weight: 600;
    color: #ffd700; /* gold/yellow for highlighting */
    background-color: #fff; /* dark red background for contrast */
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    display: inline-block;
}

    .gate-button {
        text-transform: uppercase;
      background-color: white;
      color: #c23c32;
      padding: 1rem 2rem;
      font-size: 1rem;
      font-weight: 900;
      border: none;
      border-radius: 0.5rem;
      cursor: pointer;
      width: 100%;
      max-width: 12rem;
      transition: background 0.3s;
    }

    .gate-button:hover {
         border: 2px solid white;
    }

    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-stretch:50%;
  font-family: 'Manop';
  text-align: center;
}
h1 {
  font-size: 5em;
}
h2 {
  font-size: 4em;;
}
p {
  font-size: 1.8em;
  text-align: center;
  font-weight: 500;
}
#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: .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;
}

/* Age Gate Overlay */
  /* Hide page until verified (recommended) */
  .header, .main-body, footer { visibility: hidden; }
  body.age-gate-unlocked .header,
  body.age-gate-unlocked .main-body,
  body.age-gate-unlocked footer { visibility: visible; }

  :root{
    --cc-deep-teal: #022f3d;
    --cc-ink: #0b2f3b;
    --cc-cream: #f3cfb2;
    --cc-red: #C23C32;
    --cc-card-radius: 34px;
  }

  /* Fullscreen overlay */
  .age-gate{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: var(--cc-deep-teal);
  }
  .age-gate.is-open{ display:flex; }

  /* Big rounded card w/ background image + gradient overlay */
  .age-gate__card{
    position: relative;
    width: min(980px, 92vw);
    border-radius: var(--cc-card-radius);
    overflow: hidden;
    padding: 10px 10px 100px 10px;
    text-align: center;
    background-image: url("/assets/images/age-gate-bg.jpg"); /* BG_IMAGE_URL */
    background-size: cover;
    background-position: center bottom;
  }

  /* Stack above overlays */
  .age-gate__brand,
  .age-gate__heading,
  .age-gate__copy,
  .age-gate__actions{
    position: relative;
    z-index: 1;
  }

  .age-gate__brand{
    display:flex;
    justify-content:center;
  }

  .age-gate__logo{
    width: min(900px, 80vw);
    height: auto;
    display:block;
  }

  .age-gate__heading{
    margin: 0px 0 18px;
    font-size: clamp(34px, 4.4vw, 64px);
    line-height: 1.05;
    font-weight: 900;
    color: var(--cc-ink);
    letter-spacing: -0.02em;
  }

  .age-gate__copy{
    margin: 0 auto 28px;
    max-width: 56ch;
    font-size: clamp(16px, 1.6vw, 26px);
    line-height: 1.35;
    font-weight: 600;
    color: var(--cc-ink);
  }

  .age-gate__actions{
    display:flex;
    justify-content:center;
    gap: 18px;
    margin-top: 10px;
  }

  .age-gate__btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: min(320px, 36vw);
    height: 64px;
    border-radius: 16px;
    font-size: 32px;
    font-weight: 900;
    text-decoration:none;
    cursor:pointer;
    user-select:none;
    border: 3px solid var(--cc-ink);
    transition: transform 120ms ease, filter 120ms ease;
    font-family: inherit;
  }

  .age-gate__btn:active{ transform: translateY(1px); }

  .age-gate__btn--no{
    background: rgba(255,255,255,0.15);
    color: var(--cc-ink);
  }

  .age-gate__btn--yes{
    background: var(--cc-red);
    border-color: var(--cc-red);
    color: #fff;
  }

  /* “Strict” lock */
  body.age-gate-locked{
    overflow:hidden;
    touch-action:none;
  }

  /* Responsive tweaks */
   @media (max-width: 1200px) {

  @media (max-width: 640px){
    .age-gate__card{
      padding: 20px 20px 55px 20px;
      width: min(920px, 94vw);
      border-radius: 26px;
    }
    .age-gate__card::after{ inset: 8px; border-radius: 18px; }
    .age-gate__actions{
      flex-direction: row;
      gap: 12px;
    }
    .age-gate__btn{
      height: 54px;
      font-size: 26px;
      border-radius: 14px;
      width: 44vw;
      min-width: 140px;
    }
  }


    /* Mobile Styles */
 @media (max-width: 768px) {
      .hero {
        background-image: url('../../assets/images/image (18).png'); /* Replace with your mobile image */
      }    
      
          .gate-box {
     height: auto;
        width: auto;
        padding: 2rem 1rem;
        max-width: 95vw;
        max-height: 40vh;
    }
    
    .gate-logo {
        max-width: 5rem;
      margin: 0 auto 0.5rem !important;
    }
    
    .gate-text {
      font-size: 1.5rem;
       margin-bottom: 1rem;
    }
    .gate-text1 {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .highlight-offer {
        font-size: 1rem;
        padding: 0.4rem 0.8rem;
    }
    .section img.mobileweb {
      display: block;
    }
    .section img.desktop {
      display: none;
    }
    .section img {
      margin-top: 15px;
    }
    h1 {
      font-size: 2.5em;
      max-width: 90%;
      margin:0 auto;
      display:block;
      line-height: 1.1em;
      padding-bottom: 0px;
    }
    p {
      font-size: 1.2em;
      line-height: 1.2em;
      max-width: 90%;
      margin:0 auto;
    }
    .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;
}
    }