* { box-sizing:border-box; margin:0; padding:0; }
body { font-family: Arial, sans-serif; background:#f5f7fb; color:#1f2933; }
a { color:inherit; }

.header { background:#ffffff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:20; }
.container { width:90%; max-width:1100px; margin:0 auto; }
.header-flex { display:flex; justify-content:space-between; align-items:center; padding:10px 0; }
.logo-wrap { display:flex; align-items:center; gap:10px; }
.logo { height:48px; width:auto; border-radius:6px; }
.brand-name { font-weight:700; color:#004b9b; }

.nav a { margin-left:16px; text-decoration:none; font-size:0.95rem; font-weight:600; color:#374151; }
.nav a:hover { color:#004b9b; }

.hero { background:linear-gradient(135deg,#004b9b,#198f42); color:#ffffff; padding:70px 0; }
.hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:30px; align-items:center; }
.hero-text h1 { font-size:2rem; margin-bottom:12px; }
.hero-text p { font-size:1rem; margin-bottom:18px; max-width:520px; }
.hero-buttons { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.btn { padding:9px 18px; border-radius:999px; text-decoration:none; font-weight:600; font-size:0.9rem; display:inline-block; }
.btn.primary { background:#ffffff; color:#004b9b; }
.btn.secondary { background:transparent; border:1px solid #ffffff; color:#ffffff; }
.hero-tags { display:flex; flex-wrap:wrap; gap:8px; font-size:0.8rem; }
.hero-tags span { background:rgba(255,255,255,0.15); padding:4px 10px; border-radius:999px; }

.hero-visual { display:flex; flex-direction:column; align-items:center; gap:10px; }
.circle { width:110px; height:110px; border-radius:50%; border:1px solid #ffffff; }
.slide1 { background-image:url("images/1.jpg"); background-size:cover; background-position:center; }
.slide2 { background-image:url("images/2.jpg"); background-size:cover; background-position:center; }
.slide3 { background-image:url("images/3.jpg"); background-size:cover; background-position:center; }
.hero-note { font-size:0.75rem; opacity:0.9; text-align:center; }

.section { padding:50px 0; }
.section.light { background:#ffffff; }
.section h2 { font-size:1.5rem; margin-bottom:10px; text-align:center; }
.section-subtitle { text-align:center; margin-bottom:25px; color:#4b5563; }

.two-col { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; align-items:flex-start; }
.two-col h2 { text-align:left; }
.two-col h3 { margin-bottom:8px; }

p { line-height:1.6; }

.list { list-style:none; margin-top:6px; }
.list li { margin-bottom:4px; position:relative; padding-left:18px; font-size:0.95rem; }
.list li::before { content:"✔"; position:absolute; left:0; top:0; color:#198f42; font-size:0.8rem; }

.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:10px; }
.card { background:#ffffff; border-radius:10px; padding:16px; box-shadow:0 8px 18px rgba(15,23,42,0.08); }
.card h3 { margin-bottom:6px; color:#004b9b; font-size:1.05rem; }
.card p { font-size:0.9rem; }
.price { margin-top:6px; font-weight:600; color:#198f42; }

.gallery { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; margin-top:12px; }
.gallery-item { border-radius:14px; height:140px; background-size:cover; background-position:center; box-shadow:0 8px 18px rgba(15,23,42,0.08); }
.g1 { background-image:url("images/4.jpg"); background-size:cover; background-position:center; }
.g2 { background-image:url("images/5.jpg"); background-size:cover; background-position:center; }
.g3 { background-image:url("images/6.jpg"); background-size:cover; background-position:center; }
.g4 { background-image:url("images/7.jpg"); background-size:cover; background-position:center; }

.form-box { background:#0f172a; color:#e5e7eb; padding:12px; border-radius:8px; font-family:monospace; font-size:0.78rem; overflow-x:auto; }
.mt { margin-top:10px; }
.small { margin-top:6px; font-size:0.8rem; color:#4b5563; }

.footer { background:#0f172a; color:#e5e7eb; padding:16px 0; font-size:0.8rem; }
.footer-flex { display:flex; flex-direction:column; gap:4px; text-align:center; }
.footer a { color:#93c5fd; text-decoration:none; }

@media (max-width: 768px) {
  .nav { display:none; }
  .hero-grid, .two-col { grid-template-columns:1fr; }
  .hero { padding:40px 0; }
  .hero-text h1 { font-size:1.6rem; }
}