please fix this codes (<style>
    /* Root Variables for Consistency */
    :root {
        --c-bg-primary: rgba(43, 43, 43, 0.9); /* #2b2b2b with higher opacity for better contrast */
        --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;
        --section-padding: 60px 20px;
        --fade-in-duration: 0.6s;
    }

    /* Mission and Vision Section Styles */
    .about-section {
        background-color: var(--c-bg-primary);
        padding: var(--section-padding);
        position: relative;
        color: var(--c-text-primary);
        font-family: var(--f-primary);
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Infographic Container */
    .about-container {
        max-width: var(--container-max-width);
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 40px;
        box-sizing: border-box;
        flex-wrap: wrap;
    }

    /* Individual Card */
    .about-card {
        background: rgba(255, 255, 255, 0.1);
        padding: 30px;
        border-radius: var(--s-border-radius);
        backdrop-filter: blur(10px);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        transition: transform var(--transition-speed), box-shadow var(--transition-speed), background-color var(--transition-speed);
        opacity: 0;
        animation: fadeInUp var(--fade-in-duration) forwards;
        flex: 1 1 300px;
        max-width: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    /* Fade-In and Slide-Up Animation */
    @keyframes fadeInUp {
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Hover Effects */
    .about-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 16px 24px rgba(0, 0, 0, 0.4);
        background: rgba(255, 255, 255, 0.2);
    }

    /* Icon Styling */
    .about-icon {
        width: 80px;
        height: 80px;
        fill: var(--c-gold);
        margin-bottom: 20px;
        transition: fill var(--transition-speed), transform var(--transition-speed);
    }

    /* Icon Hover Effects */
    .about-card:hover .about-icon {
        fill: var(--c-text-primary); /* Change icon color to white on hover */
        transform: scale(1.1);
    }

    /* Card Title */
    .about-title {
        background: linear-gradient(45deg, var(--c-gold), var(--c-accent));
        -webkit-background-clip: text;
        color: transparent;
        font-size: 24px;
        margin-bottom: 15px;
        position: relative;
    }

    /* Underline Decoration for Titles */
    .about-title::after {
        content: '';
        position: absolute;
        width: 60px;
        height: 3px;
        background: linear-gradient(45deg, var(--c-gold), var(--c-accent));
        left: 50%;
        bottom: -5px;
        transform: translateX(-50%);
        border-radius: 2px;
    }

    /* Paragraph Text */
    .about-text {
        font-size: 16px;
        line-height: 1.8;
        color: var(--c-text-primary);
    }

    /* Connecting Lines */
    .connecting-line {
        position: absolute;
        width: 3px;
        background: var(--c-gold);
        opacity: 0.7;
        z-index: 0;
    }

    /* Line from Cellular to Integrated */
    .line-cellular-integrated {
        top: 120px;
        left: 35%;
        height: 150px;
        transform: rotate(45deg);
    }

    /* Line from Integrated to Personalized */
    .line-integrated-personalized {
        top: 120px;
        left: 55%;
        height: 150px;
        transform: rotate(-45deg);
    }

    /* Central Line */
    .line-center {
        top: 0;
        left: 50%;
        height: 100%;
        transform: translateX(-50%);
    }

    /* Responsive Design for Tablets */
    @media (max-width: 1024px) {
        .about-container {
            max-width: 900px;
        }

        .about-card {
            max-width: 280px;
        }

        .connecting-line {
            width: 2px;
            background: var(--c-gold);
        }

        .line-cellular-integrated,
        .line-integrated-personalized,
        .line-center {
            height: 120px;
        }
    }

    /* Responsive Design for Mobile Devices */
    @media (max-width: 768px) {
        .about-container {
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        .connecting-line {
            display: none; /* Hide connecting lines on mobile */
        }

        .about-card {
            max-width: 100%;
        }
    }

    /* Further Optimization for Small Mobile Screens */
    @media (max-width: 480px) {
        .about-section {
            padding: 40px 10px;
        }

        .about-title {
            font-size: 20px;
        }

        .about-text {
            font-size: 14px;
        }

        .about-icon {
            width: 60px;
            height: 60px;
        }
    }
</style>

<section class="about-section" aria-labelledby="mission-vision">
    <!-- Decorative Gradient Line -->
    <div class="connecting-line line-center"></div>
    <div class="connecting-line line-cellular-integrated"></div>
    <div class="connecting-line line-integrated-personalized"></div>

    <div class="about-container" id="mission-vision">
        <!-- Cellular Medicine Card -->
        <div class="about-card">
            <!-- Cellular Medicine Icon -->
            <svg class="about-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
                <path d="M32 12c-10.493 0-19 8.507-19 19s8.507 19 19 19 19-8.507 19-19-8.507-19-19-19zm0 34c-8.822 0-16-7.178-16-16s7.178-16 16-16 16 7.178 16 16-7.178 16-16 16z"/>
                <path d="M32 22c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/>
            </svg>
            <h2 class="about-title">Cellular Medicine</h2>
            <p class="about-text">
                Enhanced multifaceted treatments at the cellular level
            </p>
        </div>

        <!-- Integrated Approach Card -->
        <div class="about-card">
            <!-- Integrated Approach Icon -->
            <svg class="about-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
                <path d="M32 12C15.663 12 1.327 24 1.327 24S15.663 36 32 36s30.673-12 30.673-12S48.337 12 32 12zm0 20c-6.627 0-12-5.373-12-12S25.373 8 32 8s12 5.373 12 12-5.373 12-12 12z"/>
                <path d="M32 22c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/>
            </svg>
            <h2 class="about-title">Integrated Approach</h2>
            <p class="about-text">
                Customized care that addresses the unique needs of patients
            </p>
        </div>

        <!-- Personalized Medicine Card -->
        <div class="about-card">
            <!-- Personalized Medicine Icon -->
            <svg class="about-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
                <path d="M32 12C15.663 12 1.327 24 1.327 24S15.663 36 32 36s30.673-12 30.673-12S48.337 12 32 12zm0 20c-6.627 0-12-5.373-12-12S25.373 8 32 8s12 5.373 12 12-5.373 12-12 12z"/>
                <path d="M32 22c-5.523 0-10 4.477-10 10s4.477 10 10 10 10-4.477 10-10-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/>
            </svg>
            <h2 class="about-title">Personalized Medicine</h2>
            <p class="about-text">
                Precision Outcome
            </p>
        </div>
    </div>

    <!-- Central Overlap Text -->
    <div class="about-central-text">
        Most advanced &amp; individualized care possible
    </div>
</section>) and add more codes to be better and use the  best ui diesng modern and keep the colors and fonts