make this codes (<!-- Include the Lato font and Font Awesome -->
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">

<style>
  /* ===========================
     CSS Variables
     =========================== */
  :root {
    --c-text-primary: #FFFFFF;
    --c-text-light: #D9D9D9;
    --c-gold: #D1C287;
    --c-accent: #4F3F02;
    --f-primary: 'Lato', sans-serif;
    --font-size-h2: 28px;
    --font-size-h3: 20px;
    --font-size-p: 18px;
    --font-size-list: 20px;
    --max-width: 800px;
    --padding: 40px;
    --margin-bottom: 20px;
    --icon-size: 24px;
    --icon-color: var(--c-gold);
    --icon-hover-color: var(--c-accent);
  }

  /* Apply global styles */
  body {
    background-color: var(--c-accent);
    margin: 0;
    padding: 0;
    font-family: var(--f-primary);
    color: var(--c-text-primary);
  }

  /* ===========================
     Scoped Styles for Hormones Section
     =========================== */
  .content-container-new {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--padding);
    box-sizing: border-box;
    width: 100%;
  }

  .content-box-new {
    max-width: var(--max-width);
    width: 100%;
    text-align: left;
    /* Removed background, padding, borders, box-shadow */
  }

  /* Heading Styles */
  .content-box-new h2.content-title-new {
    font-size: var(--font-size-h2); /* 28px */
    font-weight: 700;
    color: var(--c-gold);
    margin-bottom: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Paragraph Styles */
  .content-box-new p {
    font-size: var(--font-size-p); /* 18px */
    font-weight: 400;
    margin: 0 0 15px 0;
    line-height: 1.6;
    color: var(--c-text-primary);
  }

  /* Features List */
  .content-box-new ul.content-list-new {
    list-style: none;
    padding: 0;
    margin: 20px 0 0 0;
  }

  .content-box-new ul.content-list-new li.list-item-new {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
    font-size: var(--font-size-list); /* 20px */
    color: var(--c-text-primary);
  }

  /* Feature Icons */
  .content-box-new ul.content-list-new li.list-item-new i {
    color: var(--c-gold);
    font-size: var(--icon-size); /* 24px */
    margin-right: 15px;
    margin-top: 4px; /* Align icon vertically with text */
    min-width: 30px;
    text-align: center;
  }

  /* Feature Text */
  .feature-text {
    display: flex;
    flex-direction: column;
  }

  .feature-text .feature-title {
    font-size: var(--font-size-h3); /* 20px */
    font-weight: 700;
    margin: 0;
    color: var(--c-text-primary);
  }

  .feature-text .feature-description {
    font-size: 16px;
    font-weight: 400;
    margin: 5px 0 0 0;
    color: var(--c-text-light);
    line-height: 1.5;
  }

  /* Hover Effects on Features */
  .content-box-new ul.content-list-new li.list-item-new:hover {
    color: var(--c-gold);
    /* Removed transform for no movement */
  }

  .content-box-new ul.content-list-new li.list-item-new:hover i {
    color: var(--c-accent);
  }

  /* Keyframe Animations */
  /* Removed animations as per instruction */

  /* ===========================
     Responsive Design
     =========================== */
  @media (max-width: 1024px) {
    .content-box-new h2.content-title-new {
      font-size: 24px;
    }

    .content-box-new ul.content-list-new li.list-item-new {
      font-size: 18px;
    }

    .content-box-new ul.content-list-new li.list-item-new i {
      font-size: 22px;
      margin-right: 12px;
    }

    .feature-text .feature-title {
      font-size: 18px;
    }

    .feature-text .feature-description {
      font-size: 14px;
    }
  }

  @media (max-width: 768px) {
    .content-box-new h2.content-title-new {
      font-size: 22px;
    }

    .content-box-new p {
      font-size: 16px;
    }

    .content-box-new ul.content-list-new li.list-item-new {
      font-size: 16px;
    }

    .content-box-new ul.content-list-new li.list-item-new i {
      font-size: 20px;
      margin-right: 10px;
    }

    .feature-text .feature-title {
      font-size: 16px;
    }

    .feature-text .feature-description {
      font-size: 13px;
    }
  }

  @media (max-width: 480px) {
    .content-box-new h2.content-title-new {
      font-size: 20px;
    }

    .content-box-new p {
      font-size: 14px;
    }

    .content-box-new ul.content-list-new li.list-item-new {
      font-size: 14px;
    }

    .content-box-new ul.content-list-new li.list-item-new i {
      font-size: 18px;
      margin-right: 8px;
    }

    .feature-text .feature-title {
      font-size: 14px;
    }

    .feature-text .feature-description {
      font-size: 12px;
    }
  }
</style>

<div class="content-container-new">
  <div class="content-box-new">
    <h2 class="content-title-new">Hormones</h2>
    <p>
      Hormones are chemicals that coordinate different functions in your body by carrying messages through your blood to your organs, skin, muscles, and other tissues. These signals regulate chemical control systems within your body in conjunction with the neural control of the nervous systems in the brain affecting:
    </p>
    <ul class="content-list-new">
      <li class="list-item-new">
        <i class="fas fa-fire-alt"></i>
        <div class="feature-text">
          <span class="feature-title">Metabolism</span>
          <span class="feature-description">Controls the conversion of food into energy and manages body processes.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-balance-scale"></i>
        <div class="feature-text">
          <span class="feature-title">Homeostasis</span>
          <span class="feature-description">Maintains constant internal balance, such as blood pressure and blood sugar regulation.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-seedling"></i>
        <div class="feature-text">
          <span class="feature-title">Growth and Development</span>
          <span class="feature-description">Regulates growth of bones, muscles, and overall body development.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-heartbeat"></i>
        <div class="feature-text">
          <span class="feature-title">Sexual Function</span>
          <span class="feature-description">Influences reproductive organs and sexual characteristics.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-users"></i>
        <div class="feature-text">
          <span class="feature-title">Reproduction</span>
          <span class="feature-description">Regulates reproductive processes and fertility.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-bed"></i>
        <div class="feature-text">
          <span class="feature-title">Sleep-Wake Cycle</span>
          <span class="feature-description">Manages circadian rhythms and sleep patterns.</span>
        </div>
      </li>
      <li class="list-item-new">
        <i class="fas fa-smile"></i>
        <div class="feature-text">
          <span class="feature-title">Mood</span>
          <span class="feature-description">Affects emotional states and mental well-being.</span>
        </div>
      </li>
    </ul>
  </div>
</div>) looks better and add animation and best ui design and add more features