please fix this (<style>
  /* Importing Lato font and Font Awesome from Google Fonts and CDN */
  @import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

  /* ===========================
     CSS Variables
     =========================== */
  :root {
    --c-text-primary: #FFFFFF;
    --c-text-light: #D9D9D9;
    --c-gold: #D1C287;
    --c-accent: #4F3F02;
    --c-background: #2C2C2C;
    --f-primary: 'Lato', sans-serif;
    --font-size-p: 1.125rem; /* 18px */
    --font-size-h2: 1.75rem; /* 28px */
    --font-size-h3: 1.5rem;  /* 24px */
    --font-size-li: 1.125rem; /* 18px */
    --padding: 20px 0;
    --margin-bottom: 25px;
    --icon-size: 28px;
    --icon-color: var(--c-gold);
    --icon-hover-color: var(--c-accent);
    --transition-speed: 0.3s;
    --card-padding: 30px;
    --card-border-radius: 10px;
    --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    --max-width: 900px; /* Define max-width */
    --button-bg: #FFFFFF;
    --button-text: #4F3F02;
    --button-hover-bg: #D1C287;
    --button-hover-text: #2C2C2C;
    --button-padding: 12px 25px;
    --button-font-size: 16px;
    --button-border-radius: 5px;
  }

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

  /* Container Styles */
  .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: var(--padding);
    box-sizing: border-box;
    width: 100%;
    animation: fadeIn 1s ease-in-out;
  }

  .box {
    background: linear-gradient(220deg, var(--c-gold), var(--c-accent));
    border-radius: var(--card-border-radius);
    box-shadow: var(--shadow);
    padding: var(--card-padding);
    margin: 15px 0;
    color: var(--c-text-primary);
    flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
    max-width: 400px;
    display: flex;
    flex-direction: column;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }

  .box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  }

  .box h2 {
    font-size: var(--font-size-h2);
    margin-bottom: 15px;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .box h2 i {
    font-size: 24px;
    color: var(--c-gold);
    transition: color var(--transition-speed);
  }

  .box h2:hover i {
    color: var(--c-accent);
  }

  .box p {
    line-height: 1.6;
    margin-bottom: var(--margin-bottom);
    font-size: var(--font-size-p);
    color: var(--c-text-light);
    flex-grow: 1;
    transition: color var(--transition-speed);
  }

  .box p:hover {
    color: #ffffff;
  }

  /* Button Styles */
  .box .button {
    background-color: var(--button-bg);
    color: var(--button-text);
    border: none;
    padding: var(--button-padding);
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--button-font-size);
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed);
    font-weight: 700;
  }

  .box .button:hover {
    background-color: var(--button-hover-bg);
    color: var(--button-hover-text);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  }

  .box .button i {
    margin-left: 8px;
    font-size: 16px;
    transition: transform var(--transition-speed);
  }

  .box .button:hover i {
    transform: translateX(4px);
  }

  /* Responsive Design */
  @media (max-width: 768px) {
    .box {
      max-width: 45%;
    }

    .box h2 {
      font-size: 1.5rem; /* 24px */
    }

    .box p {
      font-size: 1rem; /* 16px */
    }

    .box .button {
      font-size: 14px;
      padding: 10px 20px;
    }

    .box .button i {
      font-size: 14px;
    }
  }

  @media (max-width: 480px) {
    .container {
      padding: 10px 0;
    }

    .box {
      max-width: 100%;
    }

    .box h2 {
      font-size: 1.25rem; /* 20px */
    }

    .box p {
      font-size: 0.875rem; /* 14px */
    }

    .box .button {
      font-size: 12px;
      padding: 8px 16px;
    }

    .box .button i {
      font-size: 12px;
    }
  }

  /* Fade-In Animation */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Accessibility Enhancements */
  .box .button:focus {
    outline: 2px dashed var(--c-gold);
    outline-offset: 4px;
  }

  /* Smooth Transition for Feature Description */
  .box h2, .box p, .box .button {
    transition: all var(--transition-speed);
  }

  /* Icon Hover Effect */
  .box h2:hover i,
  .box .button:hover i {
    color: var(--c-accent);
  }
</style>

<div class="container">
  <div class="box">
    <h2><i class="fas fa-microscope"></i> DIAGNOSTICS</h2>
    <p>Longeva testing includes functional assessments for cellular deficiencies, clinical evaluations through hair and skin analysis, and genetic testing to personalize health strategies, ensuring precise interventions and proactive management for optimal wellness and longevity.</p>
    <a href="https://longevacare.com/what-we-do/programs/the-longeva-diagnostics/" class="button">
      View Details <i class="fas fa-arrow-right"></i>
    </a>
  </div>
  <div class="box">
    <h2><i class="fas fa-flask"></i> PROTOCOLS</h2>
    <p>Protocols and treatments: cellular micronutrients, harmful substance elimination, DNA protection, insulin resistance reversal, immune regulation, anti-aging, disease deconditioning, neuropsychiatry, skin enhancements, lifestyle management, relaxation.</p>
    <a href="https://longevacare.com/what-we-do/programs/protocols/" class="button">
      View Details <i class="fas fa-arrow-right"></i>
    </a>
  </div>
  <!-- You can add more boxes here following the same structure -->
</div>) and rediesng these codes and add more codes and repsinvse for all devices and add more features and keep styles colors and fonts