in this codes (<!-- Font Awesome CDN -->
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
  integrity="sha512-papKpQVtH/FwvlwrNR4lgo0AwfD6VSA1E1qMJbY1wV1H+v7rXq1cGd+T3E+tm+daiPwIdG/o1Icermym2FtV3w=="
  crossorigin="anonymous"
  referrerpolicy="no-referrer"
/>

<!-- Styles -->
<style>
  /* Global Styles */
  :root {
    --c-primary: #ffffff; /* White */
    --c-secondary: #D1C287; /* Gold Accent */
    --c-secondary-dark: #4F3F02; /* Dark Gold/Brown Accent */
    --c-box-background: #2b2b2b; /* Box Background */
    --f-primary: 'Poppins', sans-serif;
    --f-secondary: 'Roboto', sans-serif;
    --s-border-radius: 8px;
    --transition-speed: 0.3s;
    --max-width: 1200px;
    --icon-size: 60px;
  }

  /* Transform Section */
  .transform-section {
    padding: 4rem 1rem;
    font-family: var(--f-primary);
    color: var(--c-primary);
    text-align: center;
    /* Removed background: var(--c-gradient-background); */
  }

  .transform-section-container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2rem;
  }

  /* Section Title */
  .transform-section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    position: relative;
    display: inline-block;
    color: var(--c-primary);
  }

  .transform-section-title::after {
    content: '';
    width: 50px;
    height: 3px;
    background-color: var(--c-secondary);
    display: block;
    margin: 0.5rem auto 0;
    border-radius: 2px;
  }

  /* Description */
  .transform-section-description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--c-primary);
  }

  /* Features Grid */
  .transform-section-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
  }

  /* Feature Item */
  .transform-section-feature {
    background: var(--c-box-background);
    border: 2px solid transparent;
    border-image: linear-gradient(to right, var(--c-secondary), var(--c-secondary-dark)) 1;
    border-radius: var(--s-border-radius);
    padding: 2rem;
    width: 280px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background var(--transition-speed), color var(--transition-speed);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--c-primary);
  }

  .transform-section-feature:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    background: #ffffff;
    color: var(--c-secondary);
    border-image: linear-gradient(to right, var(--c-secondary), var(--c-secondary-dark)) 1;
  }

  /* Feature Icon */
  .transform-section-feature-icon {
    font-size: var(--icon-size);
    color: var(--c-primary);
    margin-bottom: 1rem;
  }

  .transform-section-feature-icon i {
    width: var(--icon-size);
    height: var(--icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-speed), color var(--transition-speed);
  }

  .transform-section-feature:hover .transform-section-feature-icon i {
    transform: scale(1.1);
    color: var(--c-secondary);
  }

  /* Feature Title */
  .transform-section-feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--c-primary);
    transition: color var(--transition-speed);
  }

  /* Feature Description */
  .transform-section-feature-description {
    font-size: 1rem;
    color: var(--c-primary);
    line-height: 1.5;
    transition: color var(--transition-speed);
  }

  /* Responsive Design */
  @media (min-width: 768px) {
    .transform-section-title {
      font-size: 3rem;
    }

    .transform-section-description {
      font-size: 1.2rem;
    }

    .transform-section-feature {
      width: 300px;
    }
  }

  @media (min-width: 1024px) {
    .transform-section-title {
      font-size: 3.5rem;
    }

    .transform-section-description {
      font-size: 1.3rem;
    }

    .transform-section-feature {
      width: 350px;
    }
  }

  @media (max-width: 480px) {
    .transform-section {
      padding: 2rem 1rem;
    }

    .transform-section-title {
      font-size: 2rem;
    }

    .transform-section-description {
      font-size: 1rem;
    }

    .transform-section-features {
      flex-direction: column;
      align-items: center;
    }

    .transform-section-feature {
      width: 100%;
      max-width: 300px;
    }
  }
</style>

<!-- Transform Your Future Section -->
<section class="transform-section" aria-labelledby="transform-section-title" role="region">
  <div class="transform-section-container">
    <h2 class="transform-section-title" id="transform-section-title">Transform Your Future</h2>
    <p class="transform-section-description">
      The <strong>Longeva Concept</strong>: Longeva offers an alternative approach to healthcare through its integrated suite of cellular technologies, empowering you to achieve optimal health and longevity.
    </p>
    <div class="transform-section-features">
      <!-- Feature 1 -->
      <div class="transform-section-feature">
        <div class="transform-section-feature-icon" aria-label="Advanced Cellular Therapies Icon">
          <!-- Icon: DNA Helix -->
          <i class="fa-solid fa-dna" aria-hidden="true"></i>
        </div>
        <h3 class="transform-section-feature-title">Advanced Cellular Therapies</h3>
        <p class="transform-section-feature-description">
          Utilize cutting-edge cellular treatments to rejuvenate your body and reverse the effects of aging.
        </p>
      </div>
      <!-- Feature 2 -->
      <div class="transform-section-feature">
        <div class="transform-section-feature-icon" aria-label="Personalized Health Plans Icon">
          <!-- Icon: User Doctor -->
          <i class="fa-solid fa-user-doctor" aria-hidden="true"></i>
        </div>
        <h3 class="transform-section-feature-title">Personalized Health Plans</h3>
        <p class="transform-section-feature-description">
          Tailored healthcare solutions designed specifically to meet your unique cellular needs and health goals.
        </p>
      </div>
      <!-- Feature 3 -->
      <div class="transform-section-feature">
        <div class="transform-section-feature-icon" aria-label="Integrated Cellular Technologies Icon">
          <!-- Icon: Network Wired -->
          <i class="fa-solid fa-network-wired" aria-hidden="true"></i>
        </div>
        <h3 class="transform-section-feature-title">Integrated Cellular Technologies</h3>
        <p class="transform-section-feature-description">
          Comprehensive suite of technologies that work synergistically to enhance your health and extend your longevity.
        </p>
      </div>
    </div>
  </div>
</section>) make it great and consistent with background and don't make hover on boxes and fix icons and don't don'y head and html tags, and make it in one place and make it great for seo and this second section after hero section