/* css/style.css - Chemical catalog + brand grids, real watermark */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
:root{ --navy:#003366; --white:#fff; --text:#333; --accent:#25D366; }
body{ font-family:'Roboto',sans-serif; margin:0; color:var(--text); line-height:1.7; background:white url('images/nashco-watermark.png') center center / 60% no-repeat fixed; }
.site-header{ background:linear-gradient(135deg,var(--navy),#002244); color:#fff; text-align:center; padding:20px; position:sticky; top:0; z-index:1000; }
.header-top{ display:flex; justify-content:center; align-items:center; gap:40px; margin-bottom:20px; }
.zahy-logo{ width:140px; height:auto; }
.brand{ display:flex; justify-content:center; align-items:center; }
.logo{ width:220px; opacity:0; transform:translateY(-20px); animation:logoIn .9s ease forwards; }
@keyframes logoIn{ from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }
.nav-menu{ list-style:none; padding:20px 0; margin:0; }
.nav-menu li{ display:inline-block; margin:0 22px; }
.nav-menu a{ color:#fff; text-decoration:none; font-weight:600; position:relative; }
.nav-menu a::after{ content:''; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0)); transform:scaleX(0); transition:transform .22s; }
.nav-menu a:hover::after{ transform:scaleX(1); }
.lang-switch{ position:absolute; top:20px; right:40px; }
.lang-btn{ background:rgba(255,255,255,.2); border:1px solid rgba(255,255,255,.35); color:#fff; padding:8px 14px; border-radius:20px; cursor:pointer; }
.section, .chemical, .contact{ padding:60px 22px; max-width:1200px; margin:0 auto; }
.brand-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.brand-card{ background:#fff; border:1px solid #e7eef6; border-radius:12px; padding:12px; text-align:center; }
.brand-card img{ max-width:100%; height:auto; }
.product-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:12px; }
.product-card{ background:#fff; border:1px solid #e7eef6; border-radius:12px; padding:16px; box-shadow:0 8px 24px rgba(0,0,0,.06); }
.product-card h4{ color:var(--navy); margin-top:0; }
.badge{ color:#fff; background:#6b7a8c; padding:2px 8px; border-radius:6px; font-weight:600; }
.product-brands{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0; }
.product-brands img{ width:84px; height:auto; border:1px solid #e7eef6; border-radius:8px; background:#f7fbff; }
.cta-button{ display:inline-block; background:var(--accent); color:#fff; padding:10px 16px; border-radius:8px; text-decoration:none; }
footer{ background:var(--navy); color:#fff; text-align:center; padding:24px; margin-top:40px; }
.whatsapp-btn{ position:fixed; bottom:20px; right:20px; background:var(--accent); color:#fff; padding:12px 14px; border-radius:999px; text-decoration:none; box-shadow:0 6px 24px rgba(0,0,0,.25); }
@media (max-width:768px){ .zahy-logo{ width:110px;} .logo{ width:180px;} }