/* ===========================
   Kinza Traders - style.css
   Theme: teal / aqua / accent green
   Keep animations, responsive, and wave background
   =========================== */

:root{
  --teal: #006d77;
  --aqua: #00b4d8;
  --accent: #8bc34a;
  --muted: #6b7280;
  --bg: #ffffff;
  --card: #f8fafc;
  --text: #0f172a;
  --glass: rgba(255,255,255,0.92);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text); background:var(--bg); line-height:1.5; -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:80;
  background:var(--glass);
  border-bottom:1px solid rgba(15,23,42,0.06);
  backdrop-filter: blur(6px) saturate(120%);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{width:56px;height:56px;object-fit:contain}
.brand-name{font-weight:900;color:var(--teal);font-size:1.85rem;letter-spacing:.3px}

/* Scrollable nav */
.main-nav{display:flex;gap:14px;overflow-x:auto;padding-bottom:4px}
.main-nav a{
  display:inline-block;padding:8px 10px;color:var(--muted);text-decoration:none;font-weight:700;white-space:nowrap;
  position:relative;border-radius:8px;
}
.main-nav a::after{content:"";position:absolute;left:8px;bottom:-6px;width:0;height:3px;background:var(--aqua);transition:width .24s}
.main-nav a:hover{color:var(--teal)}
.main-nav a:hover::after{width:calc(100% - 16px)}
.main-nav::-webkit-scrollbar{display:none}

/* Sections */
.section{padding:72px 0;background:var(--bg)}
.section-alt{background:#f1fbfd}
.center{text-align:center}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}

/* Hero */
.hero{position:relative;display:flex;align-items:center;justify-content:center;min-height:68vh;text-align:center;color:#fff;overflow:hidden}
.wave-bg{background:linear-gradient(180deg,var(--aqua) 0%, var(--teal) 65%, #004d53 100%)}
.hero-content{position:relative;z-index:3;padding:0 18px}
.hero h1{font-size:2.4rem;margin:0 0 12px;text-shadow:0 6px 22px rgba(0,0,0,0.18)}
.hero p{margin:0 0 16px;opacity:.95}

/* animated wave svg */
.wave-layer{position:absolute;left:0;right:0;bottom:0;height:120px;overflow:hidden;pointer-events:none;z-index:2}
.wave-layer svg{display:block;width:100%;height:100%}
.wave1{fill:rgba(255,255,255,0.06); animation:waveAnim 9s linear infinite}
.wave2{fill:rgba(255,255,255,0.08); animation:waveAnim 12s linear infinite reverse}
@keyframes waveAnim{0%{transform:translateX(0)}100%{transform:translateX(-35%)}}

/* Buttons */
.btn{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:800;text-decoration:none;transition:transform .18s,box-shadow .18s}
.btn:hover{transform:translateY(-3px)}
.btn-primary{background:linear-gradient(90deg,var(--aqua),var(--teal));color:#fff;box-shadow:0 10px 24px rgba(0,0,0,0.12)}
.btn-warning{background:linear-gradient(90deg,#ffd166,#ffb703);color:#132;box-shadow:0 8px 18px rgba(0,0,0,0.08)}
.btn-outline{background:transparent;border:2px solid rgba(255,255,255,0.18);color:#fff;padding:10px 16px}

/* Cards grid */
.cards{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:700px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1200px){.cards{grid-template-columns:repeat(4,1fr)}}

.product-card{
  background:var(--card);border-radius:14px;padding:18px;text-align:center;color:#0b3a6b;box-shadow:0 10px 28px rgba(2,59,116,0.06);
  transition:transform .28s ease,box-shadow .28s ease;overflow:hidden;position:relative;
}
.product-card:hover{transform:translateY(-8px);box-shadow:0 18px 42px rgba(2,59,116,0.12)}
.card-img{width:100%;height:120px;object-fit:contain;margin-bottom:10px}

/* Highlights */
.highlights{display:grid;gap:12px;margin-top:18px}
@media(min-width:800px){.highlights{grid-template-columns:repeat(3,1fr)}}
.highlight-card{background:#e8f9f8;padding:14px;border-radius:12px;border:1px dashed rgba(0,180,216,0.22);text-align:center;color:var(--teal);font-weight:700}

/* Two-column layout (contact/map) */
.two-col{display:grid;gap:26px}
@media(min-width:980px){.two-col{grid-template-columns:1.2fr .8fr}}

/* Forms */
.contact-form{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(15,23,42,0.04)}
.contact-form input,.contact-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid #9bd1de;margin-bottom:12px}
/* .quick-contact, .quick-contact button {background-color:teal; } */

/* Map card */
.map-card{background:#fff;border-radius:12px;padding:14px;box-shadow:0 12px 30px rgba(15,23,42,0.04)}
.map-embed{border-radius:10px;overflow:hidden}

/* Subnav (products page) */
.subnav{position:sticky;top:64px;z-index:70;background:#e9fbfd;border-bottom:1px solid rgba(0,0,0,0.04);display:flex;gap:10px;padding:10px 18px;overflow-x:auto}
.subnav a{padding:8px 12px;border-radius:8px;color:var(--teal);font-weight:800;white-space:nowrap}
.subnav a:hover{background:rgba(0,180,216,0.08)}

/* Footer */
.site-footer{text-align:center;padding:18px;background:linear-gradient(90deg,var(--teal),var(--aqua));color:#fff;font-weight:600}

/* Fade-in animation */
.fade-in{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* Responsive tweaks */
@media(max-width:820px){
  .brand-name{font-size:1.4rem}
  .hero h1{font-size:1.8rem}
  .card-img{height:100px}
  .main-nav{gap:10px}
}

/* small-screen friendly: keep nav usable */
@media(max-width:600px){
  .brand-name{font-size:1.15rem}
  .hero{min-height:56vh}
  .cards{grid-template-columns:1fr}
}

/* utility */
.center{text-align:center}
.mt-12{margin-top:3rem}
.mt-16{margin-top:4rem}