:root{
--primary:#2b6cb0;
--primary-dark:#1f4f80;
--cibg:#f4f7fa;
--cicard:#fff;
--citext:#333;
--border:#d8dee8;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
background:var(--cibg);
color:var(--citext);
line-height:1.65;
}
.ciwrap{
width:min(1400px,94%);
margin:auto;
}
.hero{

    max-width:900px;
    margin:10px auto 0 auto;
    background:#18345c;      /* Navy */
    color:#fff;
    border-radius:14px;
    padding:8px 12px;
    box-shadow:0 8px 22px rgba(0,0,0,.18);
    text-align:left;
}

.hero h1{
    margin:0 0 6px;
	color: white;
    font-size:1.6rem;
    font-weight:700;

}

.hero .lead{
    font-size:0/6rem;
    margin-bottom:22px;
    color:#d9e7f7;

}

.hero p{
    max-width:720px;
    margin:0 auto 16px;
    line-height:1.7;
    font-size:1.0rem;
}

.hero strong{
    color:#ffffff;
}

/* Thread card headings */

.cicard h2{
    margin:8px 0 5px;
    font-size:1.05rem;
    font-weight:700;
    line-height:1.25;
    color:#18345c;
}

.cicard h3{
    margin:0 0 16px;
    font-size:0.8rem;
    font-weight:600;
    line-height:1.4;
    color:#2b6cb0;
}

.ci-container {
    display: flex;
    gap: 20px;
    align-items: center;
}

.ci-image {
    width: 30%;
}

.ci-image img {
    width: 100%;
}

.ci-text {
    flex: 1;
}


.cilead{
font-size:1.70rem;
opacity:.95;
}

.cigrid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
gap:12px;
padding:20px 0;
}
.cicard{
background:var(--cicard);
border:1px solid var(--border);
border-radius:12px;
padding:14px;
display:flex;
flex-direction:column;
box-shadow:0 6px 18px rgba(0,0,0,.08);
transition:.25s ease;
}
.cicard:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,.14);
}
.icon{font-size:1.6rem}
.cicard h2{margin:.4rem 0}
.cicard h3{
margin:0 0 1rem;
font-size:1.00rem;
color:var(--primary);
}
.cicard p{flex:1}
.cibtn{
display:inline-block;
margin-top:1rem;
padding:.85rem 1.3rem;
background:var(--primary);
color:#fff;
text-decoration:none;
font-weight:700;
border-radius:10px;
text-align:center;
}
.cibtn:hover{background:var(--primary-dark)}

@media (max-width:700px){

    .hero{
        width:94%;
        margin:10px auto;
        padding:12px;
        border-radius:8px;
    }

    .hero h1{
        font-size:1.2rem;
    }

    .hero .lead{
        font-size:0.8rem;
    }

    .cigrid{
        padding:10px 0 20px;

    }

    .cicard{
        padding:12px;
    }

    .cibtn{
        width:100%;
    }
	
	.cicard h2{
        font-size:1.00rem;
    }

    .cicard h3{
        font-size:0.8rem;
    }
	
	    .ci-container {
        flex-direction: column;
    }

    .ci-image {
        width: 70%;
    }

    .ci-text {
        width: 100%;
    }


}