*{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;color:#111;scroll-behavior:smooth}

 :root{
      --nav:#0d1b2a;
        --grey:#b3afa7;
      --muted:#9fb0c9;
      --card-bg: rgba(255,255,255,0.03);
      --max-width:1200px;
      --page-padding:1rem;
      --focus: 3px solid rgba(244,180,0,0.22);
    }

    /* ---- Reset ---- */
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;width:100%}
    body
    {
       font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.45;
  color: #e6eefc;
  width: 100%;
  background: linear-gradient( #3a4550);
  min-height: 100vh;
  overflow-x: hidden;
  margin: 0;
  padding: 0;
    }



header.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 2rem;
  background: #132d3a;
  box-shadow:0 8px 20px rgba(0,0,0,0.35);
  border-radius:0;
  width:100vw;
  position:relative;
  top:0;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  z-index:1000;
}
.brand {
  display:flex;
  gap:.9 rem;
  align-items:center;
}
.brand img {
  height:56px;width:auto;border-radius:6px;object-fit:cover;
}
.brand .title {
  color:var(--gold);
  font-weight:700;
  font-size:1.1rem;
}

/* NAV */
nav.primary {
  display:flex;
  gap:.6rem;
  align-items:center;
  transition:all .3s ease;
}
nav.primary a {
  color:#fff;
  padding:.5rem .8rem;
  border-radius:8px;
  text-decoration:none;
  font-weight:600;
  opacity:0.95;
}
nav.primary a:hover, nav.primary a.active {
  background:var(--gold);
  color:var(--nav);
  transform:translateY(-1px);
}
.menu-toggle {
  display:none;
  background:transparent;
  border:0;
  color:#fff;
  font-size:1.4rem;
  cursor:pointer;
}

/* MOBILE MENU */
@media (max-width: 720px) {
  .menu-toggle {display:inline-flex;}
  nav.primary {
    display:none;
    flex-direction:column;
    background:rgba(13,27,42,0.95);
    position:absolute;
    top:100%;
    right:0;
    left:0;
    padding:1rem;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  nav.primary.open {display:flex;}
  nav.primary a {padding:.8rem 1rem;width:100%;text-align:left;}
}

/* Focus / a11y */
a:focus,button:focus,input:focus,textarea:focus {
  outline:none;
  box-shadow:var(--focus);
  border-radius:6px;
}
main {
  padding-top: 90px; /* Adjust to your header height */
}

    /* HERO */
    .hero{
      display:grid;grid-template-columns:1fr 380px;gap:1.2rem;align-items:center;
      background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
      border-radius:12px;padding:1.2rem;box-shadow:0 10px 30px rgba(0,0,0,0.25);
    }
    .hero-left h1{font-size:2rem;color:#fff;margin-bottom:.6rem;line-height:1.05}
    .eyebrow{display:inline-block;background:rgba(244,180,0,0.12);color:var(--gold);padding:.25rem .6rem;border-radius:999px;font-weight:700;margin-bottom:.8rem}
    .lead{color:#e6eefc;max-width:60ch;margin-bottom:.9rem}
    .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
    .btn{padding:.7rem 1rem;border-radius:8px;font-weight:700;cursor:pointer;border:0;color:var(--nav);background:var(--gold);box-shadow:0 8px 20px rgba(244,180,0,0.12)}
    .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.12)}

    .hero-right{background:rgba(255,255,255,0.02);padding:1rem;border-radius:10px;display:flex;flex-direction:column;gap:.7rem}
    .tracking-title{color:#fff;font-weight:700}
    .tracking-form{display:flex;gap:.6rem;margin-top:.6rem;align-items:center;flex-wrap:wrap}
    .tracking-form input[type="text"]{flex:1;min-width:140px;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background: rgba(255,255,255,0.01);color:#fff}
    .tracking-note{color:#dbeafe;font-size:.92rem;margin-top:.45rem}

    /* SECTION / CARDS */
    section.page{background:var(--card-bg);border-radius:12px;padding:1rem;box-shadow:0 8px 20px rgba(0,0,0,0.15)}
    .section-header{display:flex;align-items:center;gap:1rem;margin-bottom:.9rem}
    .section-header h2{color:#fff;font-size:1.25rem}
    .section-header .accent{width:4rem;height:3px;background:var(--gold);border-radius:2px}

    .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
    .card{background:transparent;border-radius:10px;padding:1rem;color:#e6eefc;box-shadow:0 6px 18px rgba(0,0,0,0.18);border-left:4px solid rgba(255,255,255,0.04)}
    .card h3{color:var(--gold);margin-bottom:.5rem}
    .card p, .card ul{color:#e6eefc;font-size:.96rem}
    .card ul{list-style:none;padding-left:0}
    .card li::before{content:"•";margin-right:.6rem;color:#fff}

    /* Card images (clean) */
    .card-images{display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;height:150px;overflow:hidden;border-radius:8px}
    .card-images img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease,box-shadow .3s ease;border-radius:0}
    .card-images img:hover{transform:scale(1.03);box-shadow:0 6px 18px rgba(0,0,0,0.25)}

    /* FAQ */
    .faq-item{margin-bottom:.6rem}
    .faq-item summary{cursor:pointer;font-weight:700;color:#fff;padding:.6rem;border-radius:8px;background:rgba(255,255,255,0.02)}
    .faq-item p{padding:.6rem .8rem;color:#dbeafe;background:rgba(255,255,255,0.01);border-radius:8px;margin-top:.3rem}

    /* Contact grid */
    .contact-grid{display:grid;grid-template-columns:1fr 380px;gap:1rem}
    .contact-form{display:flex;flex-direction:column;gap:.6rem;max-width:680px}
    .contact-form input,.contact-form textarea{padding:.75rem;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.01);color:#fff}
    .contact-form label{color:#e6eefc;font-weight:600;font-size:.9rem}
    .contact-meta{color:#dbeafe;font-size:.95rem}
    .map-wrap iframe{width:100%;height:300px;border-radius:8px;border:0}

    /* Footer */
    footer.site-footer{padding:.9rem 1rem;background:rgba(13,27,42,0.7);color:#dbeafe;border-radius:10px;display:fixed;width:100%;justify-content:space-between;gap:1rem;flex-wrap:wrap}
    .socials a{color:#fff;margin-right:.6rem}

    /* WhatsApp float */
    .wa-float{position:fixed;right:100px;bottom:18px; background-image: url('https://en.wikipedia.org/wiki/WhatsApp#/media/File:WhatsApp_Logo_green.svg');padding:.7rem;border-radius:50%;box-shadow:0 8px 20px rgba(0,0,0,0.2);z-index:1200;font-size:1.25rem}

    /* Responsive */
    @media (max-width:1000px){ .hero{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} }
    @media (max-width:720px){ header.site-header{flex-direction:column;align-items:flex-start;gap:.8rem} nav.primary{display:none} .menu-toggle{display:inline-flex} .brand img{height:48px} .card-images{height:120px} }
    @media (max-width:480px){ .card-images{grid-template-columns:1fr;height:auto} .card-images img{height:140px} .hero-left h1{font-size:1.5rem} }

    /* Focus / accessibility */
    a:focus, button:focus, input:focus, textarea:focus { outline: none; box-shadow: var(--focus); border-radius:6px; }
    .muted{color:var(--muted)}
    .small{font-size:.88rem;color:var(--muted)}/* Back to Top Button */
/* Back to Top Button */
#backToTop {
  position:right;
  position:fixed;
  bottom: 30px;
  right: 30px;
  background-color: #111;
  color: #fff;
  border: none;
  outline: none;
  padding: 20px 20px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 9999;
}

/* Show the button when scrolled */
#backToTop.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

#backToTop:hover {
  background-color: #333;
}