make thsi codes (<style>
  :root {
    --c-gradient: linear-gradient(45deg, #D1C287, #4F3F02);
    --c-gray: #4a4a4a;
    --c-light-gray: #f5f5f5;
    --c-white: white;
    --c-text-light: #d9d9d9;
  }

  .header {
    background: var(--c-gradient);
    color: var(--c-white);
    padding: 16px 16px;
    font-size: 24px;
    margin-bottom: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }

  .card {
    background-color: var(--c-gray);
    color: var(--c-text-light);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
  }

  .card h2 {
    margin-top: 0;
    font-size: 22px;
    color: var(--c-white);
    margin-bottom: 12px;
  }

  .card p {
    color: var(--c-text-light);
    line-height: 1.6;
    font-size: 18px;
  }

  @media (max-width: 1024px) { /* Tablet view */
    .header {
      font-size: 22px;
    }

    .card h2 {
      font-size: 20px;
    }

    .card p {
      font-size: 16px;
    }
  }

  @media (max-width: 768px) { /* Mobile view */
    .header {
      font-size: 20px;
    }

    .card h2 {
      font-size: 18px;
    }

    .card p {
      font-size: 14px;
    }
  }
</style>

<div class="header">The Foundation</div>

<div class="card">
  <h2>Management of Cellular Micronutrients and Elimination of Harmful Substances</h2>
  <p>Our advanced program ensures your cells receive essential micronutrients, optimizing cellular function and vitality. We tailor nutrient plans, including proper diet, IV therapy, and supplements to meet your specific needs, promoting optimal health at the cellular level for enhanced energy and age reversal. We also focus on detoxifying your body by systematically eliminating harmful substances that can impede health.</p>
</div>

<div class="card">
  <h2>Protection of DNA</h2>
  <p>Our approach includes cutting-edge strategies to protect and enhance DNA integrity. By shielding your genetic material from damage and promoting repair processes, we help maintain genetic health and prevent age-related decline.</p>
</div>

<div class="card">
  <h2>Insulin Resistance Reversal</h2>
  <p>We specialize in reversing insulin resistance through targeted interventions. Our comprehensive plans include dietary modifications, lifestyle changes, and advanced treatments to restore metabolic balance and prevent diabetes and other related conditions.</p>
</div>

<div class="card">
  <h2>Regulation of the Immune System</h2>
  <p>Our programs aim to regulate and strengthen your immune system, enhancing its ability to defend against illnesses. We use personalized strategies to balance immune responses, control inflammation, reduce the risk of autoimmune disorders, and improve overall immune health.</p>
</div>
) great design and add more featuers like icons which related to content and add more codes to be bettera and don't add html nad head taga and use this styles (    :root {
        --c-bg-primary: rgba(43, 43, 43, 0.5); /* #2b2b2b with 0.5 opacity */
        --c-text-primary: white;
        --c-gold: #D1C287;
        --c-accent: #4F3F02;
        --f-primary: 'Lato', sans-serif;
        --s-border-radius: 8px;
        --transition-speed: 0.3s;
        --container-max-width: 1100px;
        --fade-in-duration: 0.6s;
        --gradient-start: #D1C287;
        --gradient-end: #4F3F02;
        --section-padding: 20px 0px; /* Added default padding */
    }
) and make it cool design and make it repssoinve deisgn