* { box-sizing:border-box; }
html { overflow-x:hidden; }
body { margin:0; font-family:Arial,sans-serif; overflow-x:hidden; }
.info { background:navy; color:white; width:100%; }
.info td { padding:8px 10px; vertical-align:middle; }
.info h4 { margin:5px 0; }
.info img { width:42px; height:42px; object-fit:cover; border-radius:50%; margin:2px; }
.hero { color:white; background:#F8F1E8; padding:15px; width:100%; }
.hero td,.hero th { padding:8px; }
.heroimg { padding:8px; background:navy; border-radius:50%; width: 140px; height: 140px; object-fit:cover; }
.name,.brandname { color:navy; font-size:clamp(32px,5vw,60px); font-weight:bold; font-style:oblique; margin:0; }
nav { color:ivory; background:navy; padding:15px; text-align:right; display:flex; justify-content:flex-end; flex-wrap:wrap; gap:4px; }
nav a { color:white; text-decoration:none; padding:10px 15px; transition:.3s; }
nav a:hover { color:navy; background:#F8F1E8; }
.message { color:white; background:navy; padding:15px; margin:20px 0; }
.about-content,.mission-table,.vision-table,.feedback-table { width:100%; }
.about-content td { padding:20px; vertical-align:middle; }
.about-content .heroimg { width:min(350px,100%); height:auto; }
h3.name { font-size:18px; line-height:1.7; }
.feedback-table td { padding:15px; vertical-align:top; }
.imgs { width:220px; max-width:100%; height:220px; object-fit:cover; padding:10px; background:navy; border-radius:100%; box-shadow:0 5px 15px rgba(0,0,0,.12); }
audio { max-width:100%; }
footer { color:whitesmoke; background:navy; font-style:italic; padding:15px; font-size:large; }
@media(max-width:992px){.info tr,.hero tr{display:grid;grid-template-columns:1fr 1fr;align-items:center}.info td,.hero td,.hero th{width:auto!important;text-align:center}.about-content tr{display:grid;grid-template-columns:1fr 1fr}.about-content td{width:auto!important}.feedback-table tr{display:grid;grid-template-columns:1fr 1fr;gap:15px}.feedback-table td{width:auto!important}}
@media(max-width:576px){.info tr,.hero tr{grid-template-columns:1fr}.info img{width:34px;height:34px}.heroimg{width:75px;height:75px}.name,.brandname{font-size:34px}nav{justify-content:center;padding:10px}nav a{padding:8px 10px;font-size:13px}.about-content tr,.feedback-table tr{grid-template-columns:1fr}.about-content td{padding:15px}.message{font-size:26px}.imgs{width:190px;height:190px}}