/* One Handed Brand v5 CSS */
body{font-family:Arial,sans-serif;margin:0;background:#fff0f5;color:#333}
a{text-decoration:none;color:inherit}
ul{list-style:none;margin:0;padding:0}
header{background:#fff;padding:10px 20px;position:sticky;top:0;z-index:100;box-shadow:0 4px 6px rgba(0,0,0,0.1);border-bottom-left-radius:10px;border-bottom-right-radius:10px}
nav{display:flex;justify-content:space-between;align-items:center}
nav .logo{font-size:1.8em;font-weight:bold;color:#e91e63}
nav ul{display:flex;gap:15px;align-items:center}
nav ul li a{padding:8px 15px;border-radius:8px;background:#fff;box-shadow:0 3px 6px rgba(0,0,0,0.16);color:#e91e63;font-weight:bold;transition:all .2s}
nav ul li a:hover{background:#e91e63;color:#fff;transform:translateY(-2px) scale(1.05);box-shadow:0 5px 10px rgba(0,0,0,.2)}
.hero{background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url('images/hero-banner.jpg') no-repeat center/cover;color:#fff;text-align:center;padding:80px 20px;border-radius:10px;margin:20px;box-shadow:0 5px 15px rgba(0,0,0,.2)}
.hero h1{font-size:2.5em;margin-bottom:10px}
.hero p{font-size:1.1em;margin-bottom:20px}
.cta-button{padding:12px 24px;background:#e91e63;color:#fff;font-weight:bold;border:none;border-radius:10px;box-shadow:0 4px 6px rgba(0,0,0,.2);transition:all .25s;display:inline-block;position:relative}
.cta-button:hover{background:#d81b60;transform:translateY(-3px) scale(1.03);box-shadow:0 6px 12px rgba(0,0,0,.25)}
.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:20px}
.product-card{background:#fff;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.1);text-align:center;transition:transform .3s,box-shadow .3s,opacity .3s;opacity:1;padding-bottom:10px}
.product-card:hover{transform:translateY(-5px) scale(1.02);box-shadow:0 8px 15px rgba(0,0,0,.2)}
.product-card img{max-width:100%;border-radius:10px 10px 0 0}
.product-card h3{margin:10px 0 5px}
.product-card p{color:#e91e63;font-weight:bold}
.social-icons a{display:inline-block;margin:0 8px;background:#fff;color:#e91e63;border-radius:50%;width:40px;height:40px;line-height:40px;font-size:18px;box-shadow:0 4px 6px rgba(0,0,0,0.2);transition:all .25s}
.social-icons a:hover{background:#e91e63;color:#fff;transform:translateY(-3px)}
.container{max-width:1000px;margin:0 auto;padding:20px}
.form{max-width:600px;margin:20px auto;background:#fff;padding:20px;border-radius:10px;box-shadow:0 3px 6px rgba(0,0,0,.1)}
.form input, .form textarea, .form select{width:100%;padding:10px;margin:6px 0 12px;border:1px solid #ddd;border-radius:8px}
table{width:100%;margin:20px 0;border-collapse:collapse;background:#fff;border-radius:10px;overflow:hidden}
th,td{border:1px solid #eee;padding:8px;text-align:center}
footer{text-align:center;padding:20px;background:#fff0f5;box-shadow:0 -2px 6px rgba(0,0,0,.1);margin-top:30px;border-top-left-radius:10px;border-top-right-radius:10px}

/* === Force header/nav to green theme === */
header { background:#fff; }

header nav ul li a{
  background:#eaf7ef !important;        /* soft green pill */
  color:#1e6b2a !important;              /* dark green text */
  border:1px solid #d7eadb !important;
  border-radius:12px !important;
  font-weight:700 !important;
  box-shadow:0 4px 10px rgba(0,0,0,.06) !important;
}

header nav ul li a:hover,
header nav ul li a.active{
  background:#4CAF50 !important;         /* primary green */
  color:#fff !important;
  border-color:#4CAF50 !important;
}

header .logo{ color:#4CAF50 !important; }
/* Footer */
.site-footer{background:#f0fff4;border-top:1px solid #e5e5e5;margin-top:30px}
.site-footer .social{display:flex;gap:12px;justify-content:center;margin-top:8px}
.site-footer .social a{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:#4CAF50;
  box-shadow:0 6px 12px rgba(0,0,0,.12); transition:transform .15s
}
.site-footer .social a:hover{transform:translateY(-2px)}

/* Floating WhatsApp (same on all pages) */
.ohb-wa{
  position:fixed;right:16px;bottom:16px;z-index:10000;
  background:#25D366;color:#fff;border-radius:999px;
  padding:10px 14px;display:flex;gap:10px;align-items:center;
  box-shadow:0 12px 24px rgba(0,0,0,.18); text-decoration:none; font-weight:700
}
.ohb-wa i{font-size:18px}

.container.about-wrap { max-width:1000px; margin:0 auto; padding:0 18px !important; }

.logo-link {
  display: inline-block;
}

.logo-img {
  height: 40px;        /* adjust as needed */
  width: auto;
  display: block;
}




.ohb-sub-wrap {
  max-width: 700px;
  margin: 18px auto;
  padding: 0 16px;
}

.ohb-sub-card {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.ohb-sub-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ohb-logo-chip {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-weight: 900;
  background: #e9f8ee; color: #1d6b2a;
  border: 1px solid #d5edd9;
  box-shadow: 0 6px 12px rgba(0,0,0,.06);
}

.ohb-sub-title {
  font-weight: 900; color: #145a25; font-size: 1.1rem;
}

.ohb-sub-tag { color: #567; font-size: 0.9rem; }

.ohb-sub-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ohb-sub-input {
  flex: 1 1 auto;
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font: inherit;
}

.ohb-sub-btn {
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: #2e7d32;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}

.ohb-sub-btn:hover { transform: translateY(-1px); }

.ohb-sub-flash {
  margin-top: 8px;
  background: #e9f8ee;
  border: 1px solid #d5edd9;
  color: #145a25;
  padding: 10px;
  border-radius: 10px;
  font-weight: 700;
  text-align: center;
}

/* === OHB track timeline – force proper wrapping === */

/* Covers *new* markup */
.track-timeline,
.timeline {                         /* support either class name */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 8px !important;
  margin-top: 12px !important;
}

.track-timeline .pill,
.timeline .dot {                    /* support either item class */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  min-height: 44px !important;
  border-radius: 999px !important;
  background: #f2f3f5 !important;
  border: 1px solid #e5e7eb !important;
  color: #333 !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  white-space: normal !important;   /* allow 2-line labels like "Ready / Dispatched" */
}

.track-timeline .pill.active,
.timeline .dot.active {
  background: #e9f8ee !important;
  border-color: #d5edd9 !important;
  color: #145a25 !important;
}

/* Smaller on narrow screens */
@media (max-width: 480px) {
  .track-timeline,
  .timeline {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .track-timeline .pill,
  .timeline .dot {
    padding: 8px 10px !important;
    font-size: .9rem !important;
  }
}


@media (max-width:520px){ .ohb-wa-label{ display:none; } }
@media(max-width:520px){.ohb-wa span{display:none}}

@media(max-width:768px){.hero h1{font-size:1.6em}.hero p{font-size:1em}}