:root {
--bg: #e2dcdc;
--card-bg: #444040;
--accent: rgb(212, 209, 209);
--muted: #b6b1b0;
--radius: 12px;
--shadow: 0 6px 18px rgba(16,24,40,0.08);
--container-pad: 20px;
}


.aboutus-header{text-align:center; margin-bottom:18px}
.aboutus-header h2{font-size:1.6rem; margin:0 0 6px}
.aboutus-lead{color:var(--muted); margin:0; font-size:0.95rem}


.aboutus-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px}


.aboutus-card{background:var(--card-bg); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:10px; min-height:150px; transition:transform .18s ease, box-shadow .18s ease}
.aboutus-card:hover{transform:translateY(-6px); box-shadow:0 14px 30px rgba(16,24,40,0.12)}


.aboutus-icon{font-size:28px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:linear-gradient(135deg, rgba(14,165,233,0.12), rgba(14,165,233,0.06)); color:var(--accent)}
.aboutus-card h3{margin:0; font-size:1.05rem}
.aboutus-card p{margin:0; color:var(--muted); font-size:0.92rem; line-height:1.4}


.aboutus-footer{margin-top:18px; display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.aboutus-footer .aboutus-small{color:var(--muted); margin:0; font-size:0.9rem}


.aboutus-btn{display:inline-block; padding:10px 16px; text-decoration:none; border-radius:10px; background:var(--accent); color:white; font-weight:600; box-shadow:0 6px 14px rgba(14,165,233,0.16)}
.aboutus-btn:hover{opacity:0.95}