/* style.css - shared site styles */
* {box-sizing: border-box; margin:0; padding:0; font-family: Arial, sans-serif;}
html,body {height:100%;}
body {background:#fff9f0; color:#222; line-height:1.6;}

/* Header & Nav */
.header-wrap {background:#004aad; color:#fff;}
header {max-width:1100px; margin:0 auto; padding:18px 20px; display:flex; align-items:center; justify-content:space-between;}
.site-title {font-size:1.4rem; font-weight:700; letter-spacing:0.5px;}
nav {display:flex; gap:8px;}
nav a {color:#fff; text-decoration:none; padding:8px 14px; border-radius:8px; background:#0066d6; font-weight:600; transition:background .18s, transform .08s;}
nav a:hover {background:#0050b3; transform:translateY(-1px);}

/* Hero */
.hero {max-width:1100px; margin:24px auto; padding:36px 20px; background:linear-gradient(180deg,#ffffff 0%, #f7fbff 50%); border-radius:12px; text-align:center; box-shadow:0 6px 20px rgba(0,0,0,0.06);}
.hero h1 {color:#004aad; font-size:2rem; margin-bottom:10px;}
.hero p {margin-bottom:18px; color:#333; font-size:1.05rem;}
.hero .btn {padding:12px 26px; font-size:1rem;}

/* Container */
.container {max-width:1100px; margin:20px auto; padding:0 20px;}

/* Bulk banner */
.bulk-banner {background:#c76a1b; color:#fff; text-align:center; padding:12px; font-weight:700; border-radius:10px; margin:18px 0;}

/* Products grid/cards */
.products-grid {display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
.card {background:#fff; padding:14px; border-radius:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); text-align:center; display:flex; flex-direction:column; height:100%;}
.card img {width:100%; height:170px; object-fit:cover; border-radius:8px; margin-bottom:12px;}
.card h3 {color:#003a8c; margin-bottom:6px;}
.card p {color:#444; margin-bottom:12px; flex-grow:1;}
.card .btn {align-self:center;}

/* Buttons - blue & noticeable */
.btn {
  display:inline-block;
  background:#007bff;
  color:#fff;
  padding:10px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  box-shadow:0 6px 18px rgba(0,123,255,0.15);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.btn:hover {transform:translateY(-3px); background:#005dc8; box-shadow:0 10px 30px rgba(0,93,200,0.18);}

/* Order form small layout */
.order-box {max-width:620px; margin:0 auto; background:#fff; padding:18px; border-radius:10px; box-shadow:0 8px 22px rgba(0,0,0,0.06);}
.order-box label {display:block; margin-top:10px; font-weight:600;}
.order-box select, .order-box input {width:100%; padding:10px; margin-top:8px; border-radius:8px; border:1px solid #ddd;}

/* Footer */
footer {background:#004aad; color:#fff; text-align:center; padding:16px 10px; margin-top:26px;}

/* Floating WhatsApp button (shared) */
#whatsapp-float {
  position:fixed;
  right:18px;
  bottom:18px;
  width:62px;
  height:62px;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  text-decoration:none;
  box-shadow:0 8px 26px rgba(37,211,102,0.24);
  z-index:9999;
  transition:transform .12s;
}
#whatsapp-float:hover {transform:scale(1.08);}

/* Responsive tweaks */
@media (max-width:700px){
  header {flex-direction:column; gap:8px; text-align:center;}
  nav {flex-wrap:wrap; justify-content:center;}
  .hero h1 {font-size:1.5rem;}
  .card img {height:150px;}
}