/* ==== Reset & Base ==== */
*,
*::before,
*::after { box-sizing: border-box; margin:0; padding:0; }
html { font-family: 'Roboto', sans-serif; scroll-behavior: smooth; }
body { line-height: 1.6; color: #333; background:#fafafa; }
img { max-width:100%; height:auto; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }

/* ==== Layout ==== */
.container { width:90%; max-width:1200px; margin:auto; }
.grid { display:grid; gap:2rem; }
@media (min-width:768px) {
  .grid { grid-template-columns: repeat(3,1fr); }
  .about-grid { grid-template-columns: 1fr 1fr; gap:3rem; }
}

/* ==== Header ==== */
.header { background:#003087; color:#fff; padding:1rem 0; position:sticky; top:0; z-index:1000; }
.header .container { display:flex; align-items:center; justify-content:space-between; }
.logo img { height:50px; }
.nav-list { display:flex; gap:1.5rem; }
.nav-list a { color:#fff; font-weight:500; }
.nav-toggle { display:none; background:none; border:none; font-size:1.8rem; color:#fff; cursor:pointer; }

/* Mobile menu */
@media (max-width:768px) {
  .nav-toggle { display:block; }
  .nav-list { position:fixed; top:70px; left:0; right:0; background:#003087; flex-direction:column; align-items:center; transform:translateY(-150%); transition:transform .3s; }
  .nav-list.open { transform:translateY(0); }
  .nav-list a { padding:1rem; width:100%; text-align:center; }
}

/* ==== Hero ==== */
.hero { background:url('images/hero.jpg') center/cover no-repeat; color:#fff; text-align:center; padding:6rem 0; }
.hero h1 { font-size:2.8rem; margin-bottom:.5rem; }
.hero p { font-size:1.2rem; margin-bottom:1.5rem; }
.btn { display:inline-block; background:#ffca28; color:#000; padding:.75rem 1.5rem; border-radius:4px; font-weight:bold; transition:background .3s; }
.btn:hover { background:#ffb300; }

/* ==== Sections ==== */
section { padding:4rem 0; }
section h2 { text-align:center; margin-bottom:2rem; font-size:2.2rem; color:#003087; }

/* Cards */
.card { background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.1); text-align:center; }
.card img { height:180px; object-fit:cover; }
.card h3 { margin:1rem 0 .5rem; color:#003087; }

/* About */
.about-img { border-radius:8px; }
.check-list { font-size:1.1rem; }
.check-list li { margin-bottom:.75rem; position:relative; padding-left:1.8rem; }
.check-list li::before { content:"✔"; color:#ffca28; position:absolute; left:0; }

/* Contact */
.contact-form { max-width:600px; margin:auto; display:grid; gap:1rem; }
.contact-form input,
.contact-form textarea { width:100%; padding:.75rem; border:1px solid #ccc; border-radius:4px; font:inherit; }
.contact-info { margin-top:2rem; text-align:center; }
.contact-info p { margin:.5rem 0; }

/* Footer */
.footer { background:#222; color:#ddd; text-align:center; padding:1.5rem 0; font-size:.9rem; }

/* ==== Responsive Tweaks ==== */
@media (max-width:480px) {
  .hero h1 { font-size:2rem; }
}