@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

body {
  margin:0;
  font-family:'Inter', Arial, sans-serif;
  color:#111;
  background:#fff;
  line-height:1.6;
}

a {color:#0f4c81; text-decoration:none;}
a:hover {text-decoration:underline;}

header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  border-bottom:1px solid #ddd;
  background:#fff;
}
header h1 {margin:0; font-weight:800; font-size:24px; color:#0f4c81;}
nav ul {list-style:none; display:flex; gap:20px; margin:0; padding:0;}
nav ul li {display:inline;}

.hero {
  background: url('../images/hero.jpg') center/cover no-repeat;
  color:white;
  text-align:center;
  padding:100px 20px;
}
.hero h1 {font-size:42px; margin-bottom:20px;}
.hero p {font-size:18px; max-width:600px; margin:0 auto;}

section {padding:60px 40px;}
section h2 {font-size:28px; margin-bottom:20px;}
section p {font-size:16px; line-height:1.6;}
ul {padding-left:20px;}

.team-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px;}
.team-member {padding:20px; border:1px solid #ddd; border-radius:10px; text-align:center;}
.team-member img {border-radius:50%; width:100px; height:100px; object-fit:cover; margin-bottom:12px;}

.contact-card {padding:20px; border:1px solid #ddd; border-radius:10px; max-width:600px; margin:0 auto;}
.contact-card input, .contact-card textarea {
  width:100%; padding:8px; margin-bottom:8px; border-radius:6px; border:1px solid #ddd;
}
.contact-card button {
  padding:10px 20px; background:#0f4c81; color:white; border:none; border-radius:6px; cursor:pointer;
}

footer {background:#f7f7f7; padding:20px 40px; text-align:center; font-size:14px; color:#555;}

@media(max-width:768px){
  header {flex-direction:column; gap:12px;}
  .hero {padding:80px 20px;}
  nav ul {flex-direction:column; gap:12px;}
}