in this codes (3. Our Mission & Vision
Section Title:
Our Mission & Vision
Mission Statement:
Empowering Healthier, Longer Lives
We deliver innovative medical homecare services focused on reversing the effects of aging and chronic diseases. Our mission is to redefine longevity and enhance your healthspan through advanced cellular medicine and personalized healthcare solutions.
Vision Statement:
A World of Accessible Longevity
We envision a future where every individual has access to top-tier healthcare solutions, ensuring longevity and vitality are within everyone's reach.
Visuals:
Inspirational imagery that aligns with mission and vision.
Infographics highlighting key mission and vision points.
) make it cool deisgn and make it for landing pages in section and don't add html and head tags ,and add more codes and respovinve diesgn and don't add background and use this styles (<style>
  /* ====================================================
     Section 2: Why Choose Longeva?
  ===================================================== */

  /* Unique Class Prefix: wc- (Why Choose) */

  /* Container for the Why Choose Section */
  .wc-section {
    width: 100%;
    padding: 4rem 1rem;
    background-color: #2b2b2b; /* Dark background */
    color: #ffffff; /* White text for contrast */
    font-family: var(--f-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  /* Section Title */
  .wc-section-title {
    font-size: 2.5rem;
    color: var(--c-gold); /* Gold color for emphasis */
    margin-bottom: 2rem;
    text-align: center;
    position: relative;
  }

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

  /* Benefits Container */
  .wc-benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    max-width: var(--max-width);
    width: 100%;
    margin-bottom: 3rem;
  }

  /* Individual Benefit Item */
  .wc-benefit-item {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent for depth */
    padding: 1.5rem;
    border-radius: var(--s-border-radius);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: flex-start;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
  }

  .wc-benefit-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  }

  /* Icon for Benefit */
  .wc-benefit-icon {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 1rem;
  }

  .wc-benefit-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1); /* Invert icons for visibility on dark background */
  }

  /* Benefit Content */
  .wc-benefit-content {
    flex-grow: 1;
  }

  .wc-benefit-title {
    font-size: 1.3rem;
    color: #ffffff; /* White text */
    margin-bottom: 0.5rem;
    font-weight: 600;
  }

  .wc-benefit-description {
    font-size: 1rem;
    color: #dddddd; /* Light gray for readability */
    line-height: 1.5;
  }

  /* Call-to-Action Button */
  .wc-cta-button {
    background: var(--c-gradient);
    color: var(--c-white);
    padding: 0.8rem 2.5rem;
    font-family: var(--f-primary);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--s-border-radius);
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed), background 0.5s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    display: inline-block;
  }

  .wc-cta-button:hover,
  .wc-cta-button:focus {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    background: var(--c-gold);
    outline: none;
  }

  /* Shimmer Effect for CTA Button */
  .wc-cta-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    animation: shimmer 2s infinite;
    pointer-events: none;
  }

  /* Responsive Grid Layout */
  @media (min-width: 768px) {
    .wc-benefits {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .wc-benefits {
      grid-template-columns: repeat(3, 1fr);
    }
  }

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

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

    .wc-benefit-item {
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .wc-benefit-icon {
      margin-right: 0;
      margin-bottom: 1rem;
    }

    .wc-cta-button {
      padding: 0.6rem 1.5rem;
      font-size: 0.9rem;
    }
  }

  /* Animation Keyframes */
  @keyframes shimmer {
    0% {
      left: -75%;
    }
    100% {
      left: 125%;
    }
  }
</style>
) but make the classes name is differnet totally and make it cool