<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Precision Health Flowchart</title>

<style>


.containerfocus{
    max-width:1200px;
    margin:auto;
}

.main-box{
    color:#fff;
    padding:6px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.main-box h1{
    font-size:18px !important;
    margin-bottom:15px;
}

.main-box p{
    font-size:16px;
    line-height:1.7;
    max-width:900px;
    margin:auto;
}

.connector{
    width:4px;
    height:60px;
    background:#7f2191;
    margin:auto;
}

.topics{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    position:relative;
}

.topic{
    background:#fff;
    border-radius:18px;
    padding:12px;
    text-align:center;
    box-shadow:0 6px 18px rgba(0,0,0,.08);
    border-top:6px solid #7f2191;
    position:relative;
    transition:.3s;
}

.topic:hover{
    transform:translateY(-8px);
}

.topic:before{
    content:"";
    position:absolute;
    width:3px;
    height:35px;
    background:#7f2191;
    top:-35px;
    left:50%;
    transform:translateX(-50%);
}

.icon{
    width:70px;
    height:70px;
    border-radius:50%;
    background:linear-gradient(135deg,#022c5e,#7f2191);
    color:white;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    margin:0 auto 15px;
}

.topic h3{
    color:#022c5e;
    font-size:15px;
}

.topic p{
    margin-top:10px;
    color:#666;
    font-size:14px;
}

@media(max-width:900px){
    .topics{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .topics{
        grid-template-columns:1fr;
    }
}
</style>
</head>
<body>

<div class="containerfocus">

    <div class="main-box">
        <h1 style="font-family: var(--default-font); color: #666;">Future-Proofing Healthcare through Sustainable <br> and Impact-Driven Practice</h1>
    </div>

    <div class="connector"></div>

    <div class="topics">

        <div class="topic">
            <h3 style="font-family: var(--default-font); color: #666;">Sustainable Healthcare Systems</h3>
        </div>

        <div class="topic">
            <h3 style="font-family: var(--default-font); color: #666;">Community-Based Healthcare</h3>
        </div>

        <div class="topic">
            <h3 style="font-family: var(--default-font); color: #666;">Health Equity & Access</h3>
        </div>

        <div class="topic">
            <h3 style="font-family: var(--default-font); color: #666;">Workforce Development</h3>
        </div>

        <div class="topic">
             <h3 style="font-family: var(--default-font); color: #666;">Research Impact</h3>
        </div>

        <div class="topic">
            <h3 style="font-family: var(--default-font); color: #666;">Evidence-Based Practice</h3>
        </div>

    </div>

</div>

</body>
</html>