body { font-family: 'Sarabun', sans-serif; margin:0; padding:0; background: #f4f6fa; color: #233; }
header { background: #243a73; color: #fff; padding: 1.3rem 0 1rem 0; text-align:center; box-shadow:0 2px 12px #0002;}
.logo { font-size: 2rem; font-weight: bold; letter-spacing: 1px; margin-bottom: 4px;}
nav { margin-top: 0.5rem; }
nav a { color:#fff; margin: 0 1.3rem; text-decoration:none; font-weight:500; transition: color .2s;}
nav a:hover { color: #ffd700;}
.hero { padding: 3rem 0 4rem 0; text-align:center; background: linear-gradient(90deg,#e3eaf7 65%,#f6f7fc 100%);}
.hero-bg { background: url('https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&w=900&q=80') center/cover no-repeat; width:100vw;height:160px; opacity:0.11; position:absolute;left:0;top:70px;z-index:0;}
.hero h1 { font-size:2.4rem; margin-bottom:1rem; color: #203357; position:relative; z-index:1;}
.hero p { font-size:1.1rem; color:#46526c; position:relative; z-index:1;}
.btn { display:inline-block; margin-top:1.5rem; background: #243a73; color: #fff; padding: 0.8rem 2.3rem; border-radius: 2rem; text-decoration:none; font-weight:500; box-shadow:0 2px 6px #0002; }
section { max-width:960px; margin: 2rem auto; padding:2rem; background:#fff; border-radius:1.1rem; box-shadow:0 2px 12px #0001; position:relative; }
h2 { color: #243a73; margin-bottom:1.3rem;}
.about-wrap { display:flex; gap:2rem; align-items: center;}
.about-wrap img { border-radius:1rem; width:220px;}
.about-wrap ul { margin-top:1rem;}
.services-list { display:flex; flex-wrap:wrap; gap:1.2rem; justify-content: center;}
.service-card { flex:1 1 220px; min-width:220px; padding:1rem; border-radius:1rem; background:#f4f6fa; box-shadow:0 1px 6px #0001; text-align:center; transition:.2s; }
.service-card img { width:96px; border-radius: 16px; box-shadow:0 2px 8px #0001; margin-bottom:1rem;}
.service-card:hover { background: #e3eaf7; transform:translateY(-4px);}
.works-list { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;}
.works-list img { width:250px; border-radius:12px; box-shadow:0 1px 10px #0002;}
.contact-grid { display:flex; gap:2rem; flex-wrap:wrap;}
.contact-form { display:flex; flex-direction:column; gap:1rem; min-width:220px;}
.contact-form input, .contact-form textarea { padding:1rem; border-radius:0.5rem; border:1px solid #d1d5db;}
.contact-form button { padding:1rem; background:#243a73; color:#fff; border:none; border-radius:0.5rem; cursor:pointer;}
.contact-info { font-size: 1.05rem; color: #2c364b;}
footer { text-align: center; background: #243a73; color: #fff; padding: 1.1rem 0; margin-top: 2rem;}
@media (max-width: 900px) {
  .about-wrap { flex-direction:column; align-items:flex-start;}
  .contact-grid { flex-direction:column;}
  section { padding:1rem;}
}