body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#0f1724;color:#e6eef6}
.wrap{max-width:1100px;margin:auto;padding:1rem}
header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:#071024;padding:0.5rem 1rem}
.logo{width:40px;height:40px}
nav{display:flex;gap:1rem}
nav a{color:#9aa6b2;text-decoration:none}
nav a.cta{background:#00b894;color:#022;padding:0.4rem 0.8rem;border-radius:6px}
.hero{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;padding:2rem 0}
.hero-img img{width:100%;border-radius:10px}
h3{margin-top:2rem}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.service{background:#0b1220;padding:1rem;border-radius:8px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0.5rem;margin-top:1rem}
.gallery img{width:100%;border-radius:8px}
.contact-form{display:flex;flex-direction:column;gap:0.5rem;max-width:400px}
.contact-form input,.contact-form textarea{width:100%;padding:0.5rem;border-radius:6px;border:none}
button.cta{background:#00b894;color:#022;padding:0.6rem;border:none;border-radius:6px;font-weight:bold;cursor:pointer}
footer{text-align:center;color:#9aa6b2;margin-top:2rem}
/* Mobile optimization */
@media (max-width: 768px) {
  .hero {
    grid-template-columns: 1fr; /* stack image and text */
    text-align: center;
  }

  .hero-img {
    margin-top: 1rem;
  }

  nav {
    display: none; /* hidden by default on mobile */
    flex-direction: column;
    gap: 1rem;
    background: #071024;
    padding: 1rem;
    position: absolute;
    top: 60px;
    right: 0;
    left: 0;
  }

  nav a {
    font-size: 1.2rem;
  }

  .menu-btn {
    display: block;
    background: none;
    border: none;
    color: #e6eef6;
    font-size: 1rem;
    cursor: pointer;
  }
}

@media (min-width: 769px) {
  .menu-btn {
    display: none; /* only show menu button on small screens */
  }

  nav {
    display: flex !important; /* always visible on desktop */
  }
}