നീലംപേരൂർ
ഗ്രാമ പഞ്ചായത്ത്

<style>
.budget-wrap{
max-width:1400px;
margin:5px auto;
font-family:Meera,"Noto Sans Malayalam",sans-serif;
}
/* HEADER */
.budget-header{
background:linear-gradient(135deg,#003b8e,#0060d8);
padding:10px;
border-radius:18px;
text-align:center;
margin-bottom:8px;
box-shadow:0 3px10pxrgba(0,0,0,.12);
}
.budget-header h1{
margin:0;
font-size:28px;
font-weight:800;
color:#fff;
}
/* GRID */
.budget-grid{
display:grid;
grid-template-columns:repeat(7,1fr);
gap:8px;
}
/* CARD */
.budget-card{
background:#fff;
border-radius:16px;
overflow:hidden;
text-align:center;
box-shadow:0 3px10pxrgba(0,0,0,.10);
transition:.3s;
}
.budget-card:hover{
transform:translateY(-3px);
}
/* TOP COLOR */
.card-top{
height:35px;
}
.blue{background:#0052ff;}
.green{background:#28a745;}
.orange{background:#ff8c00;}
.purple{background:#8a2be2;}
.pink{background:#e91e63;}
.teal{background:#009688;}
.indigo{background:#3949ab;}
/* ICON */
.icon-circle{
width:55px;
height:55px;
background:#fff;
border-radius:50%;
margin:-20px auto 5px;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
box-shadow:0 2px8pxrgba(0,0,0,.15);
}
/* YEAR */
.card-year{
font-size:26px;
font-weight:800;
color:#003b8e;
margin:5px0;
}
/* BUTTON */
.pdf-btn{
display:inline-block;
margin-bottom:10px;
padding:5px10px;
font-size:11px;
font-weight:700;
background:#003b8e;
color:#fff;
border-radius:15px;
text-decoration:none;
}
/* TABLET */
@media(max-width:1200px){
.budget-grid{
grid-template-columns:repeat(4,1fr);
}
}
/* MOBILE */
@media(max-width:768px){
.budget-grid{
grid-template-columns:repeat(2,1fr);
}
.budget-header h1{
font-size:20px;
}
.card-year{
font-size:20px;
}
}
</style>
<div class="budget-wrap">
    <div class="budget-header">
        <h1>
            രാമങ്കരി ഗ്രാമ പഞ്ചായത്ത് ബജറ്റ്
        </h1>
    </div>
    <div class="budget-grid">
        <div class="budget-card">
            <div class="card-top blue">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2025-26
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top green">
                &nbsp;
            </div>
            <div class="icon-circle">
                ₹
            </div>
            <div class="card-year">
                2024-25
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top orange">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2023-24
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top purple">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2022-23
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top pink">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2021-22
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top teal">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2020-21
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
        <div class="budget-card">
            <div class="card-top indigo">
                &nbsp;
            </div>
            <div class="icon-circle">
                
            </div>
            <div class="card-year">
                2019-20
            </div>
            <p>
                <a class="pdf-btn" href="#">ബജറ്റ് വിവരങ്ങള്‍</a>
            </p>
        </div>
    </div>
</div>