/* ============================================================
   STAR WEIGH — COMPLETE UPDATED STYLESHEET
   ============================================================ */

/* ---------- BASE ----------- */
:root {
  --brand: #0f4c81;
  --accent: #f9b233;
  --muted: #667085;
  --surface: #ffffff;
  --radius: 12px;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: #f5f7fb;
  color: #0b1220;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px;
}

/* ---------- HEADER / NAV ----------- */
header {
  background: linear-gradient(90deg, var(--brand), #093856);
  color: white;
  padding: 14px 0;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  font-size: 20px;
  color: white;
}

.logo {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #08303e;
  font-weight: 800;
}
.logo img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}


.subtitle { font-size: 12px; color: rgba(255,255,255,0.95); }

nav ul {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: rgba(255,255,255,0.95);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-size: 13px;
}

nav a:hover {
  background: rgba(255,255,255,0.06);
}

.mobile-toggle {
  display: none;
  background: transparent;
  border: none;
  color: white;
  font-size: 22px;
}

/* ---------- HERO SECTION ----------- */

.hero {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 28px 0;
  flex-direction: column;
}

.hero-left {
  width: 100%;
}

.hero h1,
.hero-left h1 {
  color: #0b1220 !important;  /* FIX: heading is now dark */
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

.hero-left .lead,
.hero-left p {
  color: #0b1220 !important; /* FIX: lead text readable */
}
.hero-logo-row {
  display: flex;
  align-items: center;
  gap: 50px;      /* space between the two images */
  margin-bottom: 15px;
}

/* Each logo styling */
.hero-logo {
  width: 120px;
  height: auto;
  object-fit: contain;
}
.cta { margin-top: 14px; display: flex; gap: 10px; }

.btn {
  background: var(--accent);
  border: none;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  color: #08303e;
  display: inline-block;
}

.btn.secondary {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid var(--brand);
}

/* ---------- CARDS ----------- */

.card {
  background: var(--surface);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 18px rgba(12,24,60,0.06);
  overflow: hidden;
}

/* ---------- PRODUCT GRID / IMAGE SIZING ----------- */

.products-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

@media(min-width:820px) {
  .products-grid { grid-template-columns: repeat(3,1fr); }
}

.product-card img,
.media-card img {
  width: 100%;
  height: 200px;   /* FIX: smaller images */
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-card h3 {
  margin: 0;
  font-size: 16px;
}

.product-card .meta { margin-top: auto; }

/* ---------- MODAL IMAGE ----------- */

.modal-content img,
#modalImage {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  border-radius: 8px;
}

/* ---------- CONTACT FORM FIXES ----------- */

.card form { display: block; }
.card label { display: block; font-weight: 600; margin-top: 8px; margin-bottom: 6px; }

.card input,
.card textarea,
.card select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d6d9df;
  font-size: 15px;
  background: #fff;
  outline: none;
}

.card input:focus,
.card textarea:focus,
.card select:focus {
  border-color: var(--brand);
  box-shadow: 0 4px 14px rgba(15,76,129,0.06);
}

/* FORM 2-column to 1-column on mobile */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media(max-width:700px) {
  .mobile-toggle { display: inline-flex; }
  nav ul { display:none; }
  nav ul.show { display:flex; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ---------- FOOTER (LIGHT BACKGROUND + DARK BOLD TEXT) ----------- */


/* ---------- MISC ----------- */
.hidden { display:none; }
.center { text-align:center; }
.two-col { display:grid; gap:18px; }
@media(min-width:700px){ .two-col { grid-template-columns:1fr 360px; } }


.whatsapp-float { position:fixed; bottom:20px; right:20px; z-index:1100; }

.modal {
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(6,12,24,0.55);
  padding:18px;
  z-index:1200;
}

.modal.open { display:flex; }

.modal-content {
  width:100%;
  max-width:900px;
  background:white;
  border-radius:12px;
  padding:16px;
  box-shadow:0 10px 40px rgba(2,8,23,0.35);
  max-height:90vh;
  overflow:auto;
}
.map-container {
  width: 100%;
  height: 350px;
  margin-top: 25px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}

.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* ===== MOBILE PRODUCT FIX: 1 per row + show whole image ===== */

/* At small screens, make the products grid single-column so each product is full width */
@media (max-width: 700px) {
  .products-grid {
    grid-template-columns: 1fr !important;   /* one product per row on mobile */
    gap: 14px;
  }

  /* Let product images scale naturally and avoid cropping */
  .product-card img,
  .media-card img {
    width: 100% !important;
    height: auto !important;         /* allow natural height */
    max-height: none !important;     /* remove max-height that caused cropping */
    object-fit: contain !important;  /* show whole image without cropping */
    display: block;
    border-radius: 10px;
  }

  /* Slightly increase padding inside product cards for breathing room */
  .product-card { padding: 12px; }
}

/* ===== Mobile sidebar (off-canvas) nav ===== */

/* overlay that darkens the page when menu is open */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6,12,24,0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s ease, visibility .22s;
  z-index: 1198;
}

/* off-canvas sidebar */
.offcanvas-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 280px;                  /* sidebar width */
  max-width: 85vw;
  background: linear-gradient(180deg, #07263d, #0f4c81);
  transform: translateX(-100%);  /* hidden by default */
  transition: transform .28s cubic-bezier(.2,.9,.2,1);
  z-index: 1199;
  padding: 20px 16px;
  box-shadow: 8px 0 28px rgba(3,12,30,0.28);
}

/* container inside the sidebar (logo + links) */
.offcanvas-nav .brand { color: #fff; margin-bottom: 12px; }
.offcanvas-nav .logo img { width:40px; height:40px; object-fit:contain; border-radius:8px; }

/* vertical stacked menu */
.offcanvas-nav ul {
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.offcanvas-nav a {
  color: #ffffff;
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
}

/* hover focus */
.offcanvas-nav a:hover,
.offcanvas-nav a:focus {
  background: rgba(255,255,255,0.06);
  outline: none;
}

/* Show the overlay and slide the sidebar in when body has .sidebar-open */
body.sidebar-open .nav-overlay {
  opacity: 1;
  visibility: visible;
}
body.sidebar-open .offcanvas-nav {
  transform: translateX(0);
}

/* Hide default horizontal nav on small screens and show mobile toggle */
@media (max-width: 820px) {
  nav ul { display:none !important; } /* hide old inline menu */
  .mobile-toggle { display:inline-flex !important; } 
  /* ensure header visuals remain */
  header { position:relative; z-index:1200; }
}

/* On larger screens, remove offcanvas display (no change) */
@media (min-width: 821px) {
  .nav-overlay, .offcanvas-nav { display: none; }
}

/* ===== Fix: show & style menu inside off-canvas sidebar ===== */

/* Ensure the cloned nav inside the offcanvas is visible and vertical */
.offcanvas-nav nav ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 8px 0 0 0 !important;
  padding: 0 !important;
}

/* Make each list item simply a block (removes inline layout) */
.offcanvas-nav nav li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Style the anchor links as large tappable buttons */
.offcanvas-nav nav a {
  display: block !important;
  padding: 12px 14px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  color: #ffffff !important;            /* white on blue sidebar */
  background: transparent !important;   /* default transparent */
}

/* Hover / active state */
.offcanvas-nav nav a:hover,
.offcanvas-nav nav a:focus {
  background: rgba(255,255,255,0.08) !important;
  outline: none !important;
}

/* If your nav had small subtitle text, make sure it's visible */
.offcanvas-nav .subtitle { color: rgba(255,255,255,0.9) !important; }

/* Make sure the sidebar has some inner scroll if very tall */
.offcanvas-nav { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Ensure mobile default hide of global nav doesn't affect offcanvas clone */
/* (this is redundant but safe) */
@media (max-width: 820px) {
  .offcanvas-nav nav ul { display: flex !important; }
}
/* ===== Fix: ensure offcanvas sidebar and overlay sit above header ===== */

/* make sure header isn't above the sidebar */
header {
  z-index: 1200; /* keep header above normal page, but below sidebar */
  position: relative; /* ensure z-index applies */
}

/* overlay slightly below the sidebar but above header/content */
.nav-overlay {
  z-index: 1499 !important;
}

/* sidebar must be highest so it fully covers the header */
.offcanvas-nav {
  z-index: 1500 !important;
  position: fixed; /* ensure it sits above header */
}

/* ===== active/current menu item highlight ===== */
/* Desktop nav and mobile offcanvas both use .is-current */

nav a.is-current,
.offcanvas-nav nav a.is-current {
  background: rgba(255,255,255,0.08); /* subtle highlight on dark header */
  color: #ffffff !important;
  position: relative;
}

/* left accent bar for off-canvas (and desktop when desired) */
nav a.is-current::before,
.offcanvas-nav nav a.is-current::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 6px;
  background: var(--accent); /* uses your --accent color */
}

/* make sure the inline desktop nav highlight is subtle and readable on light backgrounds */
@media (min-width: 821px) {
  /* if header is dark, above works; if header is light, use a dark accent */
  header nav a.is-current {
    background: rgba(15,76,129,0.08);
    color: #07263d !important;
  }
  header nav a.is-current::before {
    background: var(--brand);
  }
}

/* small animation */
nav a.is-current,
.offcanvas-nav nav a.is-current {
  transition: background .18s ease, color .12s ease;
}

/* ensure focus states remain visible */
nav a:focus.is-current,
.offcanvas-nav nav a:focus.is-current {
  outline: 2px solid rgba(15,76,129,0.18);
  outline-offset: 2px;
}
/* don't show ugly focus styles on click/tap; keep for keyboard users */
nav a:focus,
.offcanvas-nav a:focus {
  outline: none;
  box-shadow: none;
}

/* show a subtle outline only for keyboard users */
nav a:focus-visible,
.offcanvas-nav a:focus-visible {
  outline: 3px solid rgba(15,76,129,0.18);
  outline-offset: 3px;
}

/* if you previously had a background applied to :focus, remove it */
nav a.is-current,
.offcanvas-nav nav a.is-current { /* keep current highlight style as you have it */ }

/* ensure offcanvas container can receive focus without visual change */
.offcanvas-nav[tabindex="-1"]:focus { outline: none; }
.site-footer {
  background: linear-gradient(180deg, rgba(4,40,65,0.95), rgba(7,86,125,0.95));
  color: rgba(255,255,255,0.92);
  padding: 44px 0 26px;
  font-family: inherit;
}

/* container inside footer uses same .container as site */
.site-footer .container { display: block; max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* Top row: three columns */
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr;
  gap: 28px;
  align-items: start;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

/* Brand column */
.footer-brand .brand-row { display:flex; gap:14px; align-items:center; }
.footer-logo img { width:48px; height:48px; object-fit:contain; border-radius:8px; background:rgba(255,255,255,0.02); padding:6px; }
.brand-text h3 { margin:0; font-size:20px; color:#ffda5b; } /* yellow-ish for brand title */
.brand-text .small-muted { margin:6px 0 0; color:rgba(255,255,255,0.85); font-size:14px; }

/* Quick links */
.footer-links h4,
.footer-office h4 { margin:0 0 10px; color:#f2c94c; font-size:16px; font-weight:800; }
.footer-links ul { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:8px; }
.footer-links a { color:rgba(255,255,255,0.85); text-decoration:none; font-weight:600; }
.footer-links a:hover { text-decoration:underline; color:#fff; }

/* Office column */
.footer-office h5 { margin:0 0 8px; color:#ffd36a; font-size:15px; }
.footer-office address { font-style:normal; color:rgba(255,255,255,0.8); line-height:1.5; font-size:14px; }
.footer-office .phone { margin-top:10px; color:rgba(255,255,255,0.95); font-weight:700; }
.footer-office .phone a { color:inherit; text-decoration:none; }

/* Bottom row */
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:18px;
  gap:10px;
}
.footer-bottom .copyright { color:rgba(255,255,255,0.72); font-size:13px; }
.footer-bottom .socials { display:flex; gap:12px; align-items:center; }
.footer-bottom .social { color:#0b63a5; background: rgba(255,255,255,0.12); padding:6px 8px; border-radius:6px; text-decoration:none; font-weight:700; font-size:13px; }

/* small screens: stack columns vertically */
@media (max-width: 880px) {
  .footer-top { grid-template-columns: 1fr; gap:18px; padding-bottom:16px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:8px; padding-top:12px; }
  .footer-logo img { width:44px; height:44px; }
}

/* tiny screens: center bottom items */
@media (max-width: 420px) {
  .site-footer .container { padding: 0 12px; }
  .footer-bottom { align-items:center; text-align:center; }
  .footer-bottom .socials { justify-content:center; width:100%; }
}
/* ==========================================================================
   FIX: restore footer 3-column layout on desktop and keep stacked on mobile
   Paste this at the VERY END of assets/styles.css
   ========================================================================== */

/* Ensure footer container layout baseline */
.site-footer .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Desktop / tablet: force three columns */
@media (min-width: 881px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1.2fr !important;
    gap: 28px !important;
    align-items: start !important;
    padding-bottom: 26px !important;
    border-bottom: 1px solid rgba(255,255,255,0.04) !important;
  }

  .footer-bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 18px !important;
    gap: 10px !important;
  }

  /* Make sure each footer column is a block (not flex stack) */
  .footer-col {
    display: block !important;
  }

  /* Links list must be vertical in desktop footer */
  .footer-links ul {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    margin: 6px 0 0 !important;
  }

  /* Make social and copyright inline on desktop */
  .footer-bottom .copyright,
  .footer-bottom .socials {
    display: inline-block !important;
  }
}

/* Mobile: single-column stacking (keep this) */
@media (max-width: 880px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 16px !important;
  }
  .footer-bottom {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding-top: 12px !important;
  }
  .footer-bottom .socials {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    gap: 12px;
  }
}

/* Ensure address and phone appear normally (not each char stacked) */
.address-line,
.footer-office address {
  display: block !important;
  color: rgba(255,255,255,0.85) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  white-space: normal !important;
}

/* Ensure footer logo keeps its size */
.footer-logo img {
  width: 48px !important;
  height: 48px !important;
  object-fit: contain !important;
}

/* Make sure offcanvas or other nav CSS don't unexpectedly affect footer */
.site-footer,
.site-footer * {
  box-sizing: border-box !important;
}

/* final safety: if something earlier set .site-footer .container display:flex, reset it */
.site-footer .container { display: block !important; }
/* FORCE FOOTER BACK TO 3 COLUMNS ON DESKTOP */
@media (min-width: 881px) {
  .footer-top {
    display: grid !important;
    grid-template-columns: 1.4fr 1fr 1.2fr !important;
    gap: 28px !important;
    align-items: start !important;
  }
}
/* ---------- FORCE footer 3-column (append at VERY END) ---------- */
.site-footer .footer-top {
  /* if .container was on the same element, this will still win */
  display: grid !important;
  grid-template-columns: 1.4fr 1fr 1.2fr !important;
  gap: 28px !important;
  align-items: start !important;
  padding-bottom: 26px !important;
  border-bottom: 1px solid rgba(255,255,255,0.04) !important;
}

/* ensure each direct child behaves like a block column */
.site-footer .footer-top > * {
  display: block !important;
  min-width: 0 !important;    /* prevents flex-basis/overflow issues */
  width: auto !important;
}

/* preserve the mobile stacked behaviour */
@media (max-width: 880px) {
  .site-footer .footer-top {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding-bottom: 16px !important;
  }
}
/* ===== Customers Grid Section ===== */

.customers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* mobile: 2 per row */
  gap: 16px;
  margin-top: 14px;
  justify-items: center;
  align-items: center;
}

.customer-card {
  background: rgba(255,255,255,0.1);
  padding: 12px;
  border-radius: 10px;
  width: 100%;
  max-width: 180px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.customer-card img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

/* Tablet: 3 per row */
@media (min-width: 700px) {
  .customers-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Desktop: 4 per row */
@media (min-width: 1100px) {
  .customers-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* ===== Desktop nav current-item fix =====
   Makes the highlighted item readable on dark header
   Paste at the END of assets/styles.css
*/

@media (min-width: 821px) {
  /* make the active desktop nav item clearly visible */
  header nav a.is-current {
    background: rgba(255,255,255,0.08) !important; /* subtle light pill */
    color: #ffffff !important;                      /* white text for contrast */
    position: relative !important;
    padding-left: 14px !important;                  /* give room so left accent doesn't overlap text */
    padding-right: 14px !important;
  }

  /* left accent bar (keeps the yellow accent) */
  header nav a.is-current::before {
    content: "";
    position: absolute;
    left: 4px;              /* small inset so pill has margin on the left */
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 6px;
    background: var(--accent) !important;
  }

  /* ensure hover still works and doesn't hide the accent */
  header nav a.is-current:hover {
    background: rgba(255,255,255,0.10) !important;
    color: #ffffff !important;
  }
}
/* Product Demo Videos section */
.video-section h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; }
.video-section .muted { color: var(--muted); }

.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  align-items: start;
}

/* video tile */
.video-grid video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
  box-shadow: 0 6px 18px rgba(0,0,0,0.10);
}

/* center the CTA button row on small screens */
.video-section .section-head .btn.secondary {
  padding: 8px 12px;
  font-size: 14px;
}

/* Single column on mobile */
@media (max-width:820px) {
  .video-grid { grid-template-columns: 1fr; }
  .video-grid video { height: auto; max-height: 480px; }
}