/* =========================
   HANDYGOAN - CLEAN FINAL CSS
   (No duplicates / no conflicts)
   ========================= */

/* ============== DESIGN TOKENS ============== */
:root{
  --bg:#ffffff;
  --surface:#f5f5f5;
  --card:#ffffff;

  --text:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;

  /* Brand (Orange) */
  --blue:#F97316;       /* kept name for compatibility */
  --blueHover:#EA580C;
  --orange:#F97316;

  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

html[data-theme="dark"]{
  --bg:#0b0b0d;
  --surface:#141418;
  --card:#0f0f12;

  --text:#f3f4f6;
  --muted:#a1a1aa;
  --border:rgba(255,255,255,.12);

  --shadow: 0 10px 30px rgba(0,0,0,.45);
}

/* ============== BASE ============== */
*{ box-sizing: border-box; }
body{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
    padding-top: 0 !important;
  overflow-x: hidden;
}
.container{ max-width: 1200px; }

a{ color: inherit; }
a:hover{ color: var(--blue); }

/* Smooth transitions */
html, body, .navbar, .card, .btn, .form-control, .form-select, footer{
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .25s ease;
}
@media (prefers-reduced-motion: reduce){
  html, body, .navbar, .card, .btn, .form-control, .form-select, footer{ transition:none !important; }
}

/* ============== BOOTSTRAP OVERRIDES ============== */
.btn{
  border-radius: 10px;
  padding: 10px 20px;
  letter-spacing: .01em;
}
.btn-primary{
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  border: none !important;
  box-shadow: 0 14px 32px rgba(249,115,22,.22);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--blueHover) !important;
  border-color: var(--blueHover) !important;
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(249,115,22,.28);
}
.btn-outline-primary{
  border-color: var(--blue) !important;
  color: var(--blue) !important;
}
.btn-outline-primary:hover{
  background: var(--blue) !important;
  color: #fff !important;
}
.btn-outline-dark{
  border-color: rgba(11,15,25,.16) !important;
}
.btn-outline-dark:hover{
  background: rgba(11,15,25,.04) !important;
  transform: translateY(-1px);
}
.text-primary{ color: var(--blue) !important; }
.bg-primary{ background: var(--blue) !important; }
.text-accent{ color: var(--blue) !important; }

/* Inputs */
.form-control, .form-select, textarea, input{
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
.form-control:focus, .form-select:focus{
  border-color: var(--blue);
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--blue) 20%, transparent);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder{
  color: var(--muted) !important;
}

/* ============== NAVBAR (PREMIUM) ============== */
.navbar{
  background: color-mix(in srgb, var(--bg) 88%, transparent) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0,0,0,0.06);
  /* Keep header height consistent while looking premium */
  padding: 10px 0;
}
.navbar.navbar-shrink,
.navbar.navbar-scrolled{
  background: color-mix(in srgb, var(--bg) 96%, transparent) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
  border-bottom-color: color-mix(in srgb, var(--border) 65%, transparent);
}

.navbar .nav-link{
  font-weight: 600;
  color: rgba(11,15,25,.78) !important;
  position: relative;
  padding: 10px 0 14px;
}
.navbar .nav-link:hover,
.navbar .nav-link.active{
  color: var(--blue) !important;
}
.navbar .nav-link:after{
  content:'';
  position:absolute;
  left: 8px;
  right: 8px;
  bottom: 4px;
  height: 2px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease;
  border-radius: 999px;
}
.navbar .nav-link:hover:after{ transform: scaleX(1); }

.navbar .navbar-toggler{ border-color: var(--border); }
html[data-theme="dark"] .navbar{ background: rgba(15,15,18,.92) !important; }
html[data-theme="dark"] .navbar .navbar-toggler-icon{ filter: invert(1); }

/* ===== PREMIUM LOGO (clear without increasing navbar height) ===== */
.navbar-brand{
  padding: 0 !important;
  margin-right: 18px;
}
.hg-hero__trust{
display:none !important;
}

/* A small badge makes the logo pop (clarity) without making the navbar taller */
.main-logo{
  height:60px;
  width:auto;
  display:block;
  object-fit:contain;
}

/* Logo image (header) */

.brand-logo{
  height:40px;
  width:auto;
  max-width:190px;
  object-fit:contain;
  display:block;
  image-rendering:-webkit-optimize-contrast;
}

@media (max-width: 576px){
  .main-logo,
  .brand-logo{ height:36px; max-width:160px; }
  .brand-badge{ padding:5px 10px; border-radius:12px; }
}



/* Mobile */
@media(max-width:768px){
  .brand-badge{ height: 42px; padding: 6px 10px; }
  .main-logo{ height: 30px; max-width: 150px; }
}

/* ============== SECTIONS ============== */
section{ padding: 80px 0; }
.bg-light{ background: #f8f9fa !important; }
.text-muted{ color: #6c757d !important; }

/* ============== CARDS ============== */
.card, .service-card, .solutionCard, .productCard, .blogCard, .premium-card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
  overflow: hidden;
}
.card:hover, .premium-card:hover, .blogCard:hover, .productCard:hover{
  transform: translateY(-6px);
  box-shadow: 0 24px 60px rgba(0,0,0,.12);
  border-color: color-mix(in srgb, var(--blue) 30%, var(--border));
}
.card::after, .premium-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(800px 300px at 30% 0%, rgba(249,115,22,.10), rgba(0,0,0,0) 55%);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.card:hover::after, .premium-card:hover::after{ opacity: 1; }

/* ============== REVEAL ANIMATIONS ============== */
.reveal, .reveal-left, .reveal-right{
  opacity: 0;
  transition: 700ms ease;
  will-change: opacity, transform;
}
.reveal{ transform: translateY(18px); }
.reveal-left{ transform: translateX(-22px); }
.reveal-right{ transform: translateX(22px); }
.reveal.show, .reveal-left.show, .reveal-right.show{
  opacity: 1 !important;
  transform: translate(0,0);
}

/* ============== MEGA MENU (COMPACT + SCROLL) ============== */
.navbar .nav-item.dropdown.mega{ position: static; }

.navbar .dropdown-menu.mega-menu{
  border-radius: 18px;
  padding: 0;
  margin-top: 10px;

  left: 50% !important;
  transform: translateX(-50%) !important;

  width: min(980px, calc(100vw - 32px));
  max-width: 980px;

  max-height: calc(100vh - 140px);
  overflow: hidden;

  z-index: 9999;
  box-shadow: 0 18px 48px rgba(11, 15, 25, 0.12);
  border: 1px solid rgba(230,234,242,.9);
}
.navbar .dropdown-menu.mega-menu.show{ display:block; }

.mega-inner{
  background:#fff;
  padding: 14px;
  max-height: calc(100vh - 170px);
  overflow:auto;
}
.mega-head{
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #e6eaf2;
  margin-bottom: 12px;
}
.mega-title{ font-weight: 800; font-size: 14px; color:#0B0F19; }
.mega-sub{ font-size: 13px; color:#5B6475; margin-top:4px; }
.mega-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(29,78,216,.22);
  text-decoration:none;
  color:#1D4ED8;
  font-weight:700;
  background: rgba(29,78,216,.06);
}
.mega-cta:hover{ background: rgba(29,78,216,.10); }
.mega-col{
  border: 1px solid #eef2f8;
  border-radius: 16px;
  padding: 12px;
  background: #fff;
  height: 100%;
}
.mega-h{
  display:block;
  font-weight:800;
  font-size: 13px;
  color:#0B0F19;
  text-decoration:none;
  margin-bottom: 8px;
}
.mega-link{
  display:block;
  padding: 7px 0;
  color:#5B6475;
  text-decoration:none;
  font-size: 13px;
  border-top: 1px dashed rgba(230,234,242,.85);
}
.mega-link:first-of-type{ border-top: 0; }
.mega-link:hover{ color:#1D4ED8; }

@media (max-width: 991.98px){
  body{ padding-top: 78px; }

  .navbar .nav-link{ padding: 10px 12px 12px !important; }
  .navbar .nav-link:after{ left: 12px; right: 12px; bottom: 6px; }

  .navbar .dropdown-menu.mega-menu{
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 72vh;
    overflow: auto;
  }
  .mega-inner{ max-height: none; overflow: visible; padding: 16px !important; }
  .mega-head{ position: static; }
}

/* ============== HERO (FULL-WIDTH SHORT BANNER) ============== */
.hero.hero-banner{
  position: relative;
  padding: 0 !important;
  min-height: 85vh;
  max-height: 520px;
  height: 42vh;
  overflow: hidden;
}
.hero-banner-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-banner-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.hero-banner-overlay{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
}
.hero-banner-content{
  position: relative;
  z-index: 1;
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Hero text */
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: .45rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(230,234,242,.9);
  background: rgba(249,250,252,.9);
  color: rgba(11,15,25,.70);
  font-weight: 700;
  font-size: .9rem;
}
.hero-kicker .dot{
  width: 8px; height: 8px; border-radius: 999px; background: var(--orange);
  box-shadow: 0 0 0 4px rgba(249,115,22,.15);
}
.hero-sub{
  color: rgba(207, 218, 248, 0.62);
  font-size: 1.08rem;
  max-width: 42rem;
}
.hero-actions .btn{
  border-radius: 999px;
  padding: .75rem 1.05rem;
  font-weight: 800;
}

/* On banner */
.hero.hero-banner .hero-kicker,
.hero.hero-banner h1,
.hero.hero-banner .hero-sub{
  color:#0b0a0a !important;
}
.hero.hero-banner .hero-sub{
  color: rgba(255,255,255,.82) !important;
}

/* Hero stats pills */
.hero-stats{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.stat-pill{
  border: 1px solid rgba(230,234,242,.95);
  border-radius: 999px;
  padding: .55rem .8rem;
  background: #fff;
  box-shadow: 0 16px 34px rgba(15,23,42,.08);
  display:flex; align-items:center; gap: 10px;
  font-weight: 800;
  color: rgba(11,15,25,.80);
}
.stat-pill small{
  font-weight: 700;
  color: rgba(11,15,25,.55);
}
.hero.hero-banner .stat-pill{ background: rgba(255,255,255,.92); }

@media (max-width: 768px){
  .hero.hero-banner{
    height: 36vh;
    min-height: 320px;
  }
  .hero-banner-content{ padding-top: 52px; padding-bottom: 52px; }
}

/* ============== TRUST PILLS ============== */
.trust-pill{
  display:flex; align-items:center; gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: 0 14px 36px rgba(0,0,0,.06);
}
.trust-ic{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: radial-gradient(circle at 30% 30%, rgba(249,115,22,.22), rgba(249,115,22,.06));
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--border));
}

/* ============== HOME HELPERS ============== */
.section-title{ font-weight: 900; letter-spacing: -0.04em; }
.section-line{
  width: 64px; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 30%, transparent));
  box-shadow: 0 10px 30px rgba(249,115,22,.18);
}
.icon-bubble{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(249,115,22,.14);
  color: var(--blue);
  font-size: 18px;
  border: 1px solid rgba(249,115,22,.22);
}
.hover-lift{ transition: 220ms ease; }
.hover-lift:hover{ transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,.10) !important; }

/* ============== CLIENTS MARQUEE ============== */
.clients-strip{
  border-top: 1px solid rgba(230,234,242,.9);
  border-bottom: 1px solid rgba(230,234,242,.9);
  background: #fff;
  overflow: hidden;
}
.marquee{
  display:flex;
  gap: 16px;
  padding: 16px 0;
  animation: marquee 22s linear infinite;
  will-change: transform;
}
.clients-strip:hover .marquee{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.client-logo{
  min-width: 170px;
  height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(230,234,242,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(11,15,25,.42);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(249,250,252,.9);
}

/* ============== GALLERY TILES ============== */
.gallery-tile{
  border-radius: 20px;
  border: 1px solid rgba(230,234,242,.95);
  box-shadow: 0 26px 60px rgba(15,23,42,.10);
  overflow:hidden;
  position: relative;
}
.gallery-tile img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

/* ============== STATS BOXES (ABOUT / SECTIONS) ============== */
.stats-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 18px;
  margin-top: 20px;
}
.statbox{
  position:relative;
  overflow:hidden;
  padding: 22px 18px;
  border-radius: 20px;
  border: 1px solid rgba(230,234,242,.95);
  background:#fff;
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  text-align:center;
}
.statbox::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg,#1D4ED8,#F97316);
}
.statbox:hover{
  transform: translateY(-4px);
  box-shadow: 0 30px 70px rgba(15,23,42,.14);
  border-color: rgba(29,78,216,.30);
}
.statbox .num{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -1px;
  color: #0B0F19;
}
.statbox .lbl{
  font-size: 14px;
  font-weight: 800;
  color: #6c757d;
  margin-top: 4px;
}
@media (max-width: 991px){ .stats-row{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .stats-row{ grid-template-columns: 1fr; } }

/* ============== BLOGS (CORPORATE) ============== */
.blogX-hero{
  padding: 36px 0 22px;
  background:
    radial-gradient(900px 360px at 10% 10%, rgba(29,78,216,.12), transparent 60%),
    radial-gradient(700px 320px at 90% 18%, rgba(249,115,22,.10), transparent 60%),
    #fff;
  border-bottom: 1px solid rgba(230,234,242,.95);
}
.blogX-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:.5rem .85rem; border-radius:999px;
  border:1px solid rgba(230,234,242,.95);
  background: rgba(249,250,252,.9);
  font-weight:900; color: rgba(11,15,25,.70);
}
.blogX-kicker .dot{
  width:8px;height:8px;border-radius:999px;background:var(--orange);
  box-shadow:0 0 0 4px rgba(249,115,22,.15);
}
.blogX-h1{ font-weight:950; letter-spacing:-0.04em; line-height:1.03; margin-top:14px; }
.blogX-lead{ color: rgba(11,15,25,.62); font-weight:800; margin-top:10px; max-width:46rem; }

.blogX-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}
.blogCard{
  border-radius: 22px;
  overflow:hidden;
}
.blogCard-img img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}
.blogCard-body{ padding: 16px; }
.blogCard-meta{
  display:flex; gap:14px; flex-wrap:wrap;
  color: rgba(11,15,25,.55);
  font-weight:800;
  font-size: .86rem;
}
.blogCard-title{
  margin-top: 10px;
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 1.05rem;
  line-height:1.25;
}
.blogCard-title a{ color: rgba(11,15,25,.92); text-decoration:none; }
.blogCard-title a:hover{ color: var(--blue); text-decoration: underline; }
.blogCard-excerpt{
  margin-top: 10px;
  color: rgba(11,15,25,.62);
  font-weight: 800;
  min-height: 54px;
}
@media (max-width: 991px){ .blogX-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 576px){ .blogX-grid{ grid-template-columns: 1fr; } .blogCard-img img{ height: 190px; } }

/* ============== ABOUT PAGE (CLEAN) ============== */
.about-page .container{ max-width: 1200px; }
.about-page img{ max-width: 100%; }
.about-page .hero-media img{ height: clamp(260px, 35vw, 420px); width:100%; object-fit:cover; display:block; }

/* About page layout helpers (these classes are used in about.php) */
.about-page .img-auto{ width:100%; height:100%; object-fit:cover; display:block; }

.about-page .media-card,
.about-page .image-card,
.about-page .corp-card,
.about-page .corp-tile{
  background:#fff;
  border: 1px solid rgba(230,234,242,.95);
  border-radius: 22px;
  overflow:hidden;
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
}

.about-page .media-card{ position:relative; }
.about-page .media-card .media-chip{
  position:absolute;
  left: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(230,234,242,.95);
  font-weight: 800;
  font-size: .9rem;
  color: rgba(11,15,25,.85);
}

/* Right-side Mission image should be full-width and consistent height */
/* Use clamp so it looks strong on desktop and still fits mobiles. */
.about-page .image-card img{
  width:100%;
  height: clamp(220px, 22vw, 360px);
  object-fit:cover;
  display:block;
}

.about-page .stack{ display:grid; gap: 16px; }

/* Feature rows inside Who We Are */
.about-page .feature{ display:flex; gap: 12px; }
.about-page .feature .ic{
  width: 40px; height: 40px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,93,0,.10);
  color: #ff5d00;
  flex: 0 0 auto;
}

/* Life at HandyGoan tiles (fix uneven image sizing/alignment) */
.about-page .corp-tile{ height:100%; display:flex; flex-direction:column; }
.about-page .corp-tile > img{ width:100%; height: 190px; object-fit:cover; display:block; }
.about-page .corp-tile .body{ padding: 16px 18px 18px; }
.about-page .corp-tile .h{ font-weight: 950; letter-spacing: -0.02em; font-size: 1.05rem; }
.about-page .corp-tile .p{ margin-top: 6px; color: rgba(11,15,25,.62); font-weight: 700; }
@media (max-width: 576px){ .about-page .corp-tile > img{ height: 170px; } }
.partner-marquee{
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(230,234,242,.95);
  background: #fff;
  box-shadow: 0 18px 44px rgba(15,23,42,.08);
  padding: 16px 0;
}
.partner-track{
  display:flex;
  align-items:center;
  gap: 14px;
  width:max-content;
  animation: partnerScroll 22s linear infinite;
  padding: 0 16px;
  will-change: transform;
}
.partner-marquee:hover .partner-track{ animation-play-state: paused; }
.partner-pill{
  width: 170px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid rgba(230,234,242,.95);
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(249,250,252,.9);
  padding: 10px 14px;
  overflow:hidden;
  flex: 0 0 auto;
}
.partner-pill img{
  width:auto !important;
  height:36px !important;
  max-height:36px !important;
  max-width:140px !important;
  object-fit:contain !important;
  filter: grayscale(1);
  opacity:.9;
  transition:.2s ease;
}
.partner-pill:hover img{ filter: grayscale(0); opacity: 1; transform: scale(1.05); }
@keyframes partnerScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width: 576px){
  .partner-pill{ width: 140px; height: 64px; }
  .partner-pill img{ height: 32px !important; }
}

/* ============== FLOATING WHATSAPP ============== */
.whatsapp-float{
  position: fixed !important;
  right: 18px;
  bottom: 18px !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#25D366;
  color:#fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  z-index: 2147483647;
  font-size: 28px;
  text-decoration:none;
}
.whatsapp-float:hover{ color:#fff; transform: translateY(-1px); }


/* ============== QUOTE FORM ALIGNMENT ============== */
.quote-form{ max-width: 980px; margin: 0 auto; }
.quote-form .form-control, .quote-form .form-select, .quote-form textarea{ width:100%; }

/* ============== FOOTER (DARK, PREMIUM) ============== */
footer{
  background: #0B0F19;
  color: rgba(255,255,255,0.75);
}
.footer-title{ font-weight: 900; letter-spacing: -0.02em; }
.footer-link{
  color: rgba(255,255,255,0.70);
  text-decoration:none;
}
.footer-link:hover{ color:#fff; text-decoration: underline; }

/* Footer bottom spacing fix */
.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  padding: 14px 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.10);
  font-size: 14px;
  flex-wrap: wrap;
}
.footer-bottom .footer-sep{ opacity: .5; }

/* ============== DARK MODE COMPAT OVERRIDES ============== */
html[data-theme="dark"] body{ background: var(--bg) !important; color: var(--text) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light,
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary{ background-color: var(--bg) !important; }

html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-body{ color: var(--text) !important; }

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary{ color: var(--muted) !important; }

html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end{ border-color: var(--border) !important; }

html[data-theme="dark"] .card,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu{
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

html[data-theme="dark"] .btn-outline-dark{
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="dark"] .btn-outline-dark:hover{
  background-color: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #0b0b0d !important;
}
/* ===== HERO TEXT + BUTTONS FIX (FOR IMAGE BANNER) ===== */
.hero.hero-banner h1,
.hero.hero-banner .display-4{
  color:#fff !important;
}

.hero.hero-banner .text-accent{
  color: var(--orange) !important;
}

.hero.hero-banner .hero-sub{
  color: rgba(255,255,255,.88) !important;
}

.hero.hero-banner .hero-kicker{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.55) !important;
  color: rgba(17,24,39,.85) !important;
}

/* Fix invisible secondary button */
.hero.hero-banner .btn-outline-dark{
  color:#fff !important;
  border-color: rgba(255,255,255,.75) !important;
  background: rgba(255,255,255,.10) !important;
  backdrop-filter: blur(6px);
}

.hero.hero-banner .btn-outline-dark:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.95) !important;
  color:#fff !important;
}

/* Optional: make primary pop */
.hero.hero-banner .btn-primary{
  box-shadow: 0 16px 40px rgba(249,115,22,.35) !important;
}

/* Make pills readable on image */
.hero.hero-banner .stat-pill{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.70) !important;
}

.hero-banner-media img{
  filter: brightness(1.18) contrast(1.06);
}

.hero-banner-overlay{
  background: rgba(0,0,0,0.48);
}
/* NOTE:
  A previous draft added a second set of navbar/logo/search styles here
  that conflicted with the premium header and caused layout issues.
  Those overrides were removed to keep a single source of truth.
*/
/* ===== PREMIUM NAVBAR GLASS + SHRINK ===== */
.navbar{
  background: rgba(255,255,255,.78) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  transition: all .25s ease;
}

.navbar.navbar-scrolled{
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.09);
}

.navbar .nav-link{
  position: relative;
  font-weight: 650;
  opacity: .92;
}

.navbar .nav-link::after{
  content:"";
  position:absolute;
  left: 10px; right: 10px;
  bottom: -8px;
  height: 3px;
  border-radius: 99px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: .2s ease;
}

.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  transform: scaleX(1);
}
/* ===== HERO WOW TEXT ANIMATIONS ===== */
.hero-wow h1{
  animation: heroIn .7s ease both;
}
.hero-wow .hero-sub{
  animation: heroIn .9s ease .08s both;
}
.hero-wow .hero-actions{
  animation: heroIn 1s ease .16s both;
}
.hero-wow .hero-stats{
  animation: heroIn 1.1s ease .22s both;
}

@keyframes heroIn{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

/* highlight shimmer on orange words */
.hero-wow .text-accent{
  background: linear-gradient(90deg, #ffedd5, var(--orange), #ffedd5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  background-size: 200% 100%;
  animation: shimmer 2.2s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 100% 50%; }
}
/* ===== PREMIUM BUTTONS ===== */
.btn{
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
}

.hero.hero-banner .btn-outline-dark{
  border-color: rgba(255,255,255,.75) !important;
  color:#fff !important;
  background: rgba(255,255,255,.10) !important;
}
.hero.hero-banner .btn-outline-dark:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.95) !important;
}
/* ===== SECTION HEADING SYSTEM ===== */
.section-title{
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -.03em;
}
.section-sub{
  color: rgba(17,24,39,.62);
  font-weight: 600;
}
.section-line{
  width: 70px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--orange), rgba(249,115,22,.25));
  box-shadow: 0 14px 30px rgba(249,115,22,.20);
}
@media(max-width:768px){
  .section-title{ font-size: 24px; }
}
/* ===== PAGE FADE IN ===== */
body{ opacity: 0; }
html.is-loaded body{
  opacity: 1;
  transition: opacity .35s ease;
}
/* ===============================
   HOME WOW: CLIENT LOGO SLIDER + COUNTERS
   =============================== */


/* ---- CLIENT LOGO SLIDER (INFINITE MARQUEE) ---- */
.clientsX{
  background: #fff;
  border-top: 1px solid rgba(230,234,242,.9);
  border-bottom: 1px solid rgba(230,234,242,.9);
  padding: 22px 0;
  overflow:hidden;
}
.clientsX-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.clientsX-title{
  font-weight: 900;
  letter-spacing: -0.02em;
}
.clientsX-sub{
  color: rgba(17,24,39,.55);
  font-weight: 700;
  font-size: 15px;
}

/* track */
.clientsX-track{
  display:flex;
  gap: 14px;
  width: max-content;
  animation: clientsMove 22s linear infinite;
  will-change: transform;
}
.clientsX:hover .clientsX-track{
  animation-play-state: paused;
}

@keyframes clientsMove{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* logo pill */
.client-pill{
  width: 180px;
  height: 160px;
  border-radius: 16px;
  border: 1px solid rgba(230,234,242,.95);
  background: rgba(249,250,252,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  flex: 0 0 auto;
  position: relative;
  overflow:hidden;
}
.client-pill img{
  width:auto;
  height: auto;
  max-width: 140px;
  object-fit: contain;
  
  opacity: .9;
  transition: .2s ease;
}
.client-pill:hover img{
  filter: grayscale(0);
  opacity: 1;
  transform: scale(1.05);
}

/* if you don't have logos yet (text placeholder) */
.client-pill span{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(17,24,39,.45);
}

@media(max-width: 576px){
  .client-pill{ width: 150px; height: 56px; }
  .client-pill img{ height: 32px; }
}

/* ============== MEGA MENU HOVER OPEN (DESKTOP) ============== */
@media (min-width: 992px){
  .navbar .nav-item.dropdown.mega:hover > .dropdown-menu{ display:block; }
  .navbar .nav-item.dropdown.mega:hover > .nav-link{ color: var(--blue, #1D4ED8); }
}

/* ============== PRODUCT GRID FIX (ALIGN VIEW BUTTONS) ============== */
.corp-tile .card-body{
  display:flex;
  flex-direction:column;
}
.corp-tile .card-body .fw-bold{ flex: 0 0 auto; }
.corp-tile .card-body .d-flex.align-items-center.justify-content-between{
  margin-top:auto;
}
/* =========================
   NAVBAR - RESPONSIVE FIX
========================= */
.site-header, .navbar {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.navbar .container,
.site-header .container {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
}

/* logo box */
.navbar-brand, .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.navbar-brand img, .brand img, .logo img {
  height: 46px;
  width: auto;
  object-fit: contain;
}

/* nav links area */
.navbar-nav, .nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* search + icon */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.nav-search {
  position: relative;
  width: min(380px, 42vw);
}

.nav-search input {
  width: 100%;
  height: 40px;
  padding: 10px 44px 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  outline: none;
  background: #fff;
}

.nav-search button, .nav-search .search-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  height: 32px;
  width: 32px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: #F97316;
  color: #fff;
}

/* hamburger */
.nav-toggle, .menu-toggle, .navbar-toggler {
  display: none;
  margin-left: auto;
  height: 42px;
  width: 48px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

/* MOBILE */
@media (max-width: 992px) {
  .nav-toggle, .menu-toggle, .navbar-toggler { display: inline-flex; align-items:center; justify-content:center; }

  /* stack header */
  .navbar .container, .site-header .container {
    flex-wrap: wrap;
  }

  /* search full width */
  .nav-actions {
    width: 100%;
    order: 3;
  }
  .nav-search {
    width: 100%;
  }

  /* menu collapsed */
  .navbar-nav, .nav-links {
    width: 100%;
    order: 4;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    display: none; /* toggled by JS */
  }

  /* open state (add/remove .is-open on menu container) */
  .navbar-nav.is-open, .nav-links.is-open { display: flex; }
}
/* Make product cards equal height + align View button row */
.product-card, .product-item, .card.product, .product-grid .card {
  height: 100%;
}

.product-card .card-body,
.product-item .card-body,
.product-grid .card .card-body {
  display: flex;
  flex-direction: column;
}

/* this makes the bottom row stick to bottom */
.product-card .card-cta,
.product-item .card-cta,
.product-grid .card .card-cta {
  margin-top: auto !important;
}

/* keep badge + button aligned nicely */
.product-grid .badge{
  max-width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ===== Quote Form Premium UI (solution-detail.php) ===== */
.quote-wrap{
  max-width: 980px;
  margin: 0 auto;
}

.quote-title{
  font-weight: 800;
  margin-bottom: 6px;
  text-align: center;
}

.quote-sub{
  text-align: center;
  color: #6b7280;
  margin-bottom: 16px;
}

.quote-card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 12px 35px rgba(0,0,0,.06);
}

.quote-card .form-control,
.quote-card .form-select{
  border-radius: 14px;
  padding: 12px 12px;
  border: 1px solid rgba(0,0,0,.14);
}

.quote-card .btn.quote-btn{
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 800;
}

/* Mobile extra spacing */
@media (max-width: 768px){
  .quote-card{ padding: 14px; }
}
/* Fix phone input group alignment */
.input-group{
  display: flex !important;
  flex-wrap: nowrap !important;
}

.input-group .form-select{
  width: 90px;
  min-width: 90px;
  max-width: 110px;
}

.input-group .form-control{
  flex: 1;
}

/* Mobile fix */
@media(max-width:576px){
  .input-group{
    flex-wrap: nowrap !important;
  }
}
/* ===== NAVBAR FIX (desktop + mobile) ===== */
.navbar .container{
  display:flex !important;
  align-items:center !important;
  gap:14px;
}

.navbar-brand{ flex:0 0 auto; }

.navbar-nav{
  flex: 1 1 auto;
  justify-content:center;
  gap: 22px;
}

/* right area (search + admin icon) */
.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
  margin-left:auto;
}

.admin-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  color:#111827;
  text-decoration:none;
}

.admin-link i{ font-size:20px; }

/* keep search inside navbar */
.nav-search{ position:relative; width:280px; }
.nav-search input{ width:100%; height:42px; border-radius:999px; padding:10px 44px 10px 14px; }
.nav-search button{ position:absolute; right:6px; top:50%; transform:translateY(-50%); height:32px; width:32px; border-radius:999px; }

/* MOBILE */
@media(max-width:992px){
  .navbar-nav{ justify-content:flex-start; gap:10px; }
  .nav-actions{ width:100%; order:3; }
  .nav-search{ width:100%; }
}
.admin-avatar{
  font-size: 20px;
  line-height: 1;
}
/* NAVBAR stick to top clean */
.navbar, .site-header, header{
  position: sticky;
  top: 0;
  z-index: 9999;
  margin-top: 0 !important;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(10px);
}

/* remove any spacing around navbar container */
.navbar .container{
  padding-top: 10px;
  padding-bottom: 10px;
}

/* if any wrapper adds space */
.navbar-wrap, .header-wrap{
  margin: 0 !important;
  padding: 0 !important;
}
.hero, .hero-section{
  margin-top: 0 !important;
}
.admin-link{
  border-radius: 999px;
  width: 44px;
  height: 44px;
}


/* ===============================
   BLOG DETAIL PAGE (LIKE WP STYLE)
   =============================== */

.blogPost-hero{
  padding: 84px 0 44px;
  background:
    radial-gradient(900px 360px at 10% 10%, rgba(249,115,22,.14), transparent 60%),
    radial-gradient(700px 320px at 90% 18%, rgba(29,78,216,.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}

.blogPost-breadcrumb{
  font-weight: 800;
  font-size: 13px;
  color: var(--muted);
  display:flex; flex-wrap:wrap; gap:8px;
}
.blogPost-breadcrumb a{ text-decoration:none; color: var(--muted); }
.blogPost-breadcrumb a:hover{ color: var(--blue); }
.blogPost-breadcrumb .sep{ opacity:.6; }

.blogPost-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding:.55rem .85rem;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.75);
  font-weight:900;
}
.blogPost-kicker .dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--orange);
  box-shadow:0 0 0 4px rgba(249,115,22,.18);
}
.blogPost-kicker .muted{ color: var(--muted); font-weight:800; }

.blogPost-title{
  margin-top: 14px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.06;
}

.blogPost-lead{
  margin-top: 12px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-weight: 650;
  max-width: 44rem;
}

.blogPost-actions{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }
.blogPost-actions .btn{ border-radius: 999px; font-weight: 900; padding: .65rem 1.05rem; }

.blogPost-pills{ margin-top: 16px; display:flex; gap:10px; flex-wrap:wrap; }
.blogPost-pills .pill{
  display:inline-flex; align-items:center;
  padding:.5rem .75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-weight:800;
  font-size:13px;
  color: var(--muted);
}

.blogPost-image{
  border-radius: 22px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow: 0 18px 44px rgba(11,15,25,.10);
  background:#F6F8FB;
}
.blogPost-image img{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.blogPost-body{ padding: 44px 0 84px; background: var(--bg); }
.blogPost-wrap{ max-width: 980px; margin: 0 auto; }

.blogPost-content{
  background: #fff;
  border:1px solid var(--border);
  border-radius: 22px;
  padding: 26px 22px;
  box-shadow: 0 14px 36px rgba(11,15,25,.06);
}
.blogPost-content h2{ margin-top: 22px; font-weight: 950; letter-spacing:-.02em; }
.blogPost-content h3{ margin-top: 18px; font-weight: 900; }
.blogPost-content p{ color: color-mix(in srgb, var(--text) 84%, var(--muted)); line-height: 1.75; }
.blogPost-content ul{ padding-left: 18px; }
.blogPost-content li{ margin: 8px 0; }

.blogPost-h2{ font-weight: 950; letter-spacing:-.02em; margin: 0 0 12px; }

.blogPost-faqs{ margin-top: 22px; }
.faqItem{
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 10px 12px;
  background:#fff;
  box-shadow: 0 10px 26px rgba(11,15,25,.05);
  margin: 10px 0;
}
.faqItem summary{
  cursor:pointer;
  list-style:none;
  font-weight: 900;
  color: var(--text);
}
.faqItem summary::-webkit-details-marker{ display:none; }
.faqBody{
  margin-top: 10px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  line-height: 1.7;
}

.blogPost-cta{
  margin-top: 20px;
  border-radius: 22px;
  border:1px solid color-mix(in srgb, var(--orange) 40%, var(--border));
  background:
    radial-gradient(700px 240px at 10% 10%, rgba(249,115,22,.16), transparent 60%),
    radial-gradient(650px 220px at 90% 30%, rgba(29,78,216,.10), transparent 60%),
    #fff;
  padding: 22px;
  box-shadow: 0 14px 34px rgba(11,15,25,.06);
}
.blogPost-cta h3{ font-weight: 950; margin-bottom: 8px; }
.blogPost-cta p{ color: color-mix(in srgb, var(--text) 78%, var(--muted)); margin-bottom: 14px; }
.blogPost-ctaActions{ display:flex; gap:10px; flex-wrap:wrap; }
.blogPost-ctaActions .btn{ border-radius: 999px; font-weight: 900; padding: .65rem 1.05rem; }

.blogPost-back{
  display:inline-flex;
  text-decoration:none;
  font-weight: 900;
  color: var(--blue);
}

@media (max-width: 991px){
  .blogPost-hero{ padding-top: 76px; }
  .blogPost-content{ padding: 20px 16px; }
}


/* =========================================================
   WOW HERO (DRIBBBLE-STYLE) – responsive, lightweight
   ========================================================= */
.heroWow{
  position: relative;
  padding: 110px 0 70px;
  overflow: hidden;
  background: radial-gradient(1200px 420px at 15% 15%, rgba(29,78,216,.14), transparent 60%),
              radial-gradient(900px 380px at 85% 10%, rgba(249,115,22,.12), transparent 55%),
              var(--bg);
}
@media (max-width: 992px){
  .heroWow{ padding: 96px 0 52px; }
}

.heroWow-bg{ position:absolute; inset:0; pointer-events:none; }
.heroWow-bg .gridlines{
  position:absolute; inset:-10%;
  background-image:
    linear-gradient(to right, rgba(230,234,242,.55) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(230,234,242,.55) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: radial-gradient(circle at 30% 15%, #000 0 40%, transparent 70%);
  opacity:.45;
}
.heroWow-bg .blob{
  position:absolute;
  width: 520px; height: 520px;
  border-radius: 999px;
  filter: blur(40px);
  opacity:.45;
  transform: translateZ(0);
  animation: blobFloat 10s ease-in-out infinite;
}
.heroWow-bg .blob-1{
  left: -120px; top: -160px;
  background: radial-gradient(circle at 30% 30%, rgba(29,78,216,.55), transparent 60%);
}
.heroWow-bg .blob-2{
  right: -160px; top: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(249,115,22,.55), transparent 60%);
  animation-delay: -3.5s;
}
@keyframes blobFloat{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,18px,0) scale(1.05); }
}

.heroWow-kicker{
  display:inline-flex; align-items:center; gap:10px;
  padding: .55rem .85rem;
  border: 1px solid rgba(230,234,242,.95);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  font-weight: 900;
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
}
.heroWow-kicker .dot{
  width: 9px; height: 9px; border-radius: 999px;
  background: var(--orange);
  box-shadow: 0 0 0 5px rgba(249,115,22,.16);
}

.heroWow-title{
  margin-top: 14px;
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.03;
  font-size: clamp(30px, 3.7vw, 52px);
}
.heroWow-title .accent{ color: var(--blue); }
.heroWow-title .accent2{ color: var(--orange); }

.heroWow-sub{
  margin-top: 12px;
  color: color-mix(in srgb, var(--text) 78%, var(--muted));
  font-weight: 650;
  line-height: 1.75;
  max-width: 52ch;
  font-size: 15.8px;
}

.heroWow-cta{
  margin-top: 18px;
  display:flex; gap:12px; flex-wrap:wrap;
}
.heroWow-cta .btn{
  border-radius: 999px;
  font-weight: 950;
  padding: 12px 18px;
}
.heroWow-trust{
  margin-top: 18px;
  display:flex; gap:14px; flex-wrap:wrap;
}
.heroWow-trust .trustItem{
  flex: 0 0 auto;
  border: 1px solid rgba(230,234,242,.95);
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 12px 14px;
  min-width: 160px;
  box-shadow: 0 14px 40px rgba(16,24,40,.06);
}
.heroWow-trust .trustNum{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.02em;
}
.heroWow-trust .trustLbl{
  margin-top: 2px;
  color: var(--muted);
  font-weight: 700;
  font-size: 12.5px;
}

/* Showcase */
.heroShowcase{
  position: relative;
  min-height: 420px;
  perspective: 900px;
}
@media (max-width: 992px){
  .heroShowcase{ min-height: 360px; margin-top: 8px; }
}

.showMain{
  border-radius: 22px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(12px);
  box-shadow: 0 20px 65px rgba(16,24,40,.14);
  overflow:hidden;
  transform: translateZ(0);
}
.showMain-top{
  padding: 14px 14px 0;
  display:flex; gap:10px; flex-wrap:wrap;
}
.pill{
  display:inline-flex; align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  color: #0B0F19;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.06);
}
.pill2{ color: #fff; background: rgba(29,78,216,.92); border-color: rgba(29,78,216,.35); }

.showMain-media{
  position: relative;
  aspect-ratio: 16/10;
  margin-top: 12px;
  overflow:hidden;
}
.showMain-media img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}
.showMain-media .shine{
  position:absolute; inset:-60%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 55%);
  transform: rotate(12deg);
  opacity:.8;
  animation: shineMove 6.5s ease-in-out infinite;
}
@keyframes shineMove{
  0%,100%{ transform: translate3d(-12%, -10%, 0) rotate(12deg); }
  50%{ transform: translate3d(10%, 10%, 0) rotate(12deg); }
}

.showMain-bottom{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 14px;
}
.showMain-bottom .stat{
  border: 1px solid rgba(230,234,242,.95);
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255,255,255,.85);
}
.showMain-bottom .statVal{ font-weight: 950; font-size: 16px; }
.showMain-bottom .statLbl{ margin-top: 2px; color: var(--muted); font-weight: 700; font-size: 12px; }

.showMini{
  position:absolute;
  display:flex; align-items:center; gap:12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(17,24,39,.92);
  color:#fff;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 55px rgba(16,24,40,.18);
  width: min(260px, 85%);
}
.showMini .miniIcon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.1);
  font-size: 18px;
}
.showMini .miniT{ font-weight: 950; letter-spacing: -.01em; }
.showMini .miniS{ opacity:.8; font-weight: 650; font-size: 12.5px; }

.showMini-1{ left: -10px; top: 32px; }
.showMini-2{ right: -10px; top: 130px; }
.showMini-3{ left: 10px; bottom: 42px; background: rgba(29,78,216,.92); }

@media (max-width: 576px){
  .showMini{ position: static; margin-top: 12px; width:100%; }
  .showMini-1,.showMini-2,.showMini-3{ left:auto; right:auto; top:auto; bottom:auto; }
  .heroShowcase{ min-height: auto; }
}

/* Video modal */
.wowVideoModal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.wowVideoModal.is-open{ display:block; }
.wowVideoBackdrop{ position:absolute; inset:0; background: rgba(0,0,0,.58); backdrop-filter: blur(6px); }
.wowVideoCard{
  position:absolute; left:50%; top:50%;
  transform: translate(-50%,-50%);
  width: min(980px, calc(100% - 28px));
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 28px 90px rgba(0,0,0,.30);
  overflow: hidden;
}
.wowVideoClose{
  position:absolute; right:10px; top:8px;
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.9);
  font-size: 22px;
  line-height: 1;
  font-weight: 900;
}
.wowVideoRatio{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background:#0b0f19;
}
.wowVideoRatio video{
  width:100%; height:100%;
  display:block;
}
.wowVideoFallback{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:6px;
  color:#fff;
  padding: 18px;
  text-align:center;
}
.wowVideoFallback code{
  background: rgba(255,255,255,.12);
  padding: 4px 8px;
  border-radius: 10px;
  color:#fff;
}
.wowVideoFallback .fallbackTitle{ font-weight: 950; font-size: 18px; }
.wowVideoFallback .fallbackText{ opacity:.85; font-weight: 650; }

/* Scroll reveal (lightweight) */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}


/* ================== PREMIUM PAGE SECTIONS (GLOBAL) ================== */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#64748b;
  font-weight:700;
}
.section-title{
  letter-spacing:-0.03em;
  font-weight:800;
}

.page-hero{
  position:relative;
  padding:72px 0 42px;
  overflow:hidden;
  background: #f8fafc;
  border-bottom: 1px solid rgba(15,23,42,.06);
}
.page-hero .hero-bg{
  position:absolute; inset:-40px;
  background:
    radial-gradient(600px 260px at 12% 20%, rgba(59,130,246,.20), transparent 55%),
    radial-gradient(520px 240px at 86% 10%, rgba(249,115,22,.22), transparent 55%),
    radial-gradient(520px 240px at 70% 80%, rgba(16,185,129,.12), transparent 55%);
  filter: blur(0px);
  pointer-events:none;
}
.page-hero .hero-card{
  position:relative;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 60px rgba(2,6,23,.08);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.35rem .6rem;
  border-radius:999px;
  font-weight:700;
  font-size:.78rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.8);
}
.pill-blue{ background: rgba(59,130,246,.12); border-color: rgba(59,130,246,.25); color:#1d4ed8; }
.pill-orange{ background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.25); color:#c2410c; }

.mini-info{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.6rem .7rem;
  border-radius: 14px;
  background: rgba(2,6,23,.03);
  border: 1px solid rgba(15,23,42,.06);
  font-size:.88rem;
  color:#0f172a;
}
.mini-info i{ color:#10b981; }

.cardX-lite{
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 12px 40px rgba(2,6,23,.06);
}

.feature-card{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding: 14px;
  border-radius: 16px;
  background: rgba(2,6,23,.02);
  border: 1px solid rgba(15,23,42,.06);
}
.feature-card .ic{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: rgba(59,130,246,.12);
  color:#1d4ed8;
  flex: 0 0 auto;
}
.richtext{ line-height:1.75; }

.step-list{ display:grid; gap:10px; }
.step{
  display:flex; gap:12px; align-items:flex-start;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px dashed rgba(15,23,42,.16);
  background: rgba(255,255,255,.6);
}
.step > span{
  width:30px; height:30px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(249,115,22,.12);
  color:#c2410c;
  font-weight:900;
  flex: 0 0 auto;
}

.sticky-wrap{ position: sticky; top: 96px; }
@media (max-width: 991px){
  .sticky-wrap{ position: static; top:auto; }
  .page-hero{ padding: 56px 0 32px; }
}

.solution-card{
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 12px 40px rgba(2,6,23,.06);
  transition: transform .18s ease, box-shadow .18s ease;
}
.solution-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 70px rgba(2,6,23,.10);
}
.solution-thumb{
  position:relative;
  height: 170px;
  background: #f1f5f9;
}
.solution-thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
}
.thumb-placeholder{
  width:100%; height:100%;
  display:grid; place-items:center;
  color:#94a3b8;
  font-size: 26px;
}
.solution-thumb .pill{
  position:absolute;
  left:12px; top:12px;
}

.solution-mini{
  display:flex;
  border-radius: 18px;
  overflow:hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 30px rgba(2,6,23,.06);
}
.solution-mini .mini-thumb{
  width: 140px;
  background:#f1f5f9;
}
.solution-mini .mini-thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
@media (max-width:575px){
  .solution-mini{ flex-direction:column; }
  .solution-mini .mini-thumb{ width:100%; height:170px; }
}

/* Make all page headers less dull automatically */
.bg-light{
  background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
}



.ai-msg{
  line-height: 1.35;
}
.ai-bot{
  background: linear-gradient(180deg, rgba(249,115,22,.10), rgba(17,24,39,.03));
  border: 1px solid rgba(229,231,235,.9);
}
.ai-user{
  background: rgba(17,24,39,.92);
  color:#fff;
}
.ai-typing{
  width: fit-content;
  max-width: 78%;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(229,231,235,.9);
  background: rgba(255,255,255,.85);
  display:flex;
  gap: 6px;
  align-items:center;
  margin: 10px 0;
}
.ai-typing span{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(17,24,39,.45);
  display:inline-block;
  animation: aiDot 1s infinite ease-in-out;
}
.ai-typing span:nth-child(2){ animation-delay: .12s; }
.ai-typing span:nth-child(3){ animation-delay: .24s; }
@keyframes aiDot{
  0%,100%{ transform: translateY(0); opacity:.45;}
  50%{ transform: translateY(-3px); opacity:1;}
}

/* ===== HandyGoan Premium Hero ===== */
.hg-hero{
  position: relative;
  padding: 54px 0 26px;
  overflow: hidden;
  background: #fff;
}

.hg-hero__bg{
  position:absolute; inset:-40% -20%;
  background:
    radial-gradient(600px 300px at 20% 20%, rgba(255,122,0,.14), transparent 60%),
    radial-gradient(520px 300px at 80% 35%, rgba(29,78,216,.10), transparent 55%),
    radial-gradient(520px 320px at 50% 90%, rgba(17,24,39,.06), transparent 60%);
  pointer-events:none;
}

.hg-hero__wrap{
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 34px;
  align-items: center;
}

.hg-hero__pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(230,234,242,.9);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #4b5563;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
}

.hg-hero__pill .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff6a00;
  box-shadow: 0 0 0 6px rgba(255,106,0,.15);
}

.hg-hero__title{
  margin: 14px 0 12px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4.3vw, 58px);
  color: #0b1220;
}

.hg-hero__title span{
  color: #ff6a00;
}

.hg-hero__desc{
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.7;
  color: #4b5563;
  max-width: 54ch;
}

.hg-hero__cta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.hg-btn{
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.hg-btn2{
  padding: 12px 18px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
}

.hg-hero__mini{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.mini{
  display:flex;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(230,234,242,.9);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(17,24,39,.06);
}

.mini__icon{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,106,0,.10);
  font-size: 18px;
}

.mini__t{ font-weight: 800; color:#0b1220; font-size: 14px; }
.mini__d{ color:#6b7280; font-size: 12px; margin-top: 2px; }

.hg-hero__trust{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.trust{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(230,234,242,.9);
  background:#fff;
}

.trust__k{ font-weight: 900; color:#0b1220; font-size: 13px; }
.trust__v{ color:#6b7280; font-size: 12px; margin-top: 2px; }

/* Right media */
.hg-hero__right{ position: relative; }

.hg-hero__media{
  border-radius: 22px;
  border: 1px solid rgba(230,234,242,.95);
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(17,24,39,.12);
  background: #f8fafc;
}

.hg-hero__img{
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
}

.hg-hero__float{
  position: absolute;
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(230,234,242,.9);
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 40px rgba(17,24,39,.10);
}

.f__icon{
  width: 38px; height: 38px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(29,78,216,.10);
}

.f__t{ font-weight: 900; color:#0b1220; font-size: 13px; }
.f__d{ color:#6b7280; font-size: 12px; margin-top: 2px; }

.hg-f1{ left: -14px; bottom: 74px; }
.hg-f2{ right: -14px; bottom: 18px; }

/* Responsive */
@media (max-width: 992px){
  .hg-hero__wrap{ grid-template-columns: 1fr; }
  .hg-hero__img{ height: 360px; }
  .hg-f1{ left: 10px; }
  .hg-f2{ right: 10px; }
}

@media (max-width: 576px){
  .hg-hero{ padding: 34px 0 18px; }
  .hg-hero__mini{ grid-template-columns: 1fr; }
  .hg-hero__img{ height: 280px; }
  .hg-f1, .hg-f2{ display:none; }
}

/* Footer logo */
.footer-logo{height:60px;width:auto;margin-bottom:10px}

/* Footer links */
.footer-links{list-style:none;padding:0;margin-top:10px;display:grid;gap:8px}
.footer-links a{text-decoration:none;color:#ccc}
.footer-links a:hover{color:#fff}

/* ===== Page Loader (safe, lightweight) ===== */
.hg-loader{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  z-index:99999;
  transition:opacity .25s ease, visibility .25s ease;
}
.hg-loader.is-hidden{ opacity:0; visibility:hidden; }
.hg-loader__box{
  display:flex; flex-direction:column; gap:10px; align-items:center;
  padding:18px 22px;
  border-radius:16px;
  border:1px solid rgba(2,6,23,.08);
  box-shadow:0 20px 60px rgba(2,6,23,.12);
  background:#fff;
}
.hg-loader__logo{ height:38px; width:auto; object-fit:contain; }
.hg-loader__bar{
  width:180px; height:6px; border-radius:999px;
  background:rgba(2,6,23,.08);
  overflow:hidden;
}
.hg-loader__bar > span{
  display:block; height:100%; width:45%;
  background:linear-gradient(90deg, #ff6a00, #ff8a3d);
  border-radius:999px;
  animation:hgLoad 1s infinite ease-in-out;
}
@keyframes hgLoad{
  0%{ transform:translateX(-120%); }
  100%{ transform:translateX(260%); }
}
/* ===== WHY SECTION PREMIUM ===== */
.hg-bg-off{
  background:#f6f3f0;
  padding:70px 0 80px;
}

/* heading */
.hg-why-head{
  max-width:1180px;
  margin:0 auto 40px;
  padding:0 20px;
}

.hg-why-title{
  font-size: clamp(40px,5vw,82px);
  font-weight:900;
  line-height:.95;
  margin:0;
  letter-spacing:-.02em;
}

.hg-why-sub{
  margin-top:14px;
  color:rgba(0,0,0,.65);
  max-width:60ch;
  font-size:15px;
}

/* mosaic layout */
.hg-mosaic{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap:18px;
}

.hg-mosaic-main{
  min-height:420px;
}

.hg-mosaic-side{
  min-height:200px;
}

.hg-mosaic-side-col{
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* card base */
.hg-mosaic a{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  box-shadow:0 14px 34px rgba(0,0,0,.12);
  text-decoration:none;
  transition:.4s ease;
}

/* dark overlay */
.hg-mosaic a::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.65));
}

/* hover zoom */
.hg-mosaic a:hover{
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
}

/* icon */
.hg-mosaic-icon{
  position:absolute;
  top:16px;
  left:16px;
  font-size:22px;
  z-index:2;
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(8px);
  padding:8px 10px;
  border-radius:10px;
}

/* text bottom */
.hg-mosaic-cap{
  position:absolute;
  bottom:18px;
  left:18px;
  right:18px;
  z-index:2;
  color:#fff;
}

.hg-mc-t{
  font-size:20px;
  font-weight:800;
  margin-bottom:4px;
}

.hg-mc-s{
  font-size:13px;
  opacity:.9;
}

/* mobile */
@media(max-width:992px){
  .hg-mosaic{
    grid-template-columns:1fr;
  }
  .hg-mosaic-main{min-height:260px;}
  .hg-mosaic-side{min-height:180px;}
}

/* ===== AUDIENCE (Premium Dark Section) ===== */
.hg-audience{
  background: radial-gradient(1000px 600px at 50% 0%, rgba(255,85,0,.18), rgba(0,0,0,0) 55%),
              #3d3d3d;
  padding: 80px 0 90px;
  position: relative;
  overflow: hidden;
}

.hg-aud-container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  color: #fff;
}

.hg-accent{ color:#ff5500; }

.hg-pill{
  display:inline-block;
  font-size: 12px;
  letter-spacing:.2em;
  text-transform: uppercase;
  color:#ff5500;
  background: rgba(255,85,0,.12);
  border: 1px solid rgba(255,85,0,.22);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hg-aud-h2{
  font-size: clamp(26px, 3.2vw, 44px);
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hg-aud-p{
  max-width: 78ch;
  color: rgba(255,255,255,.72);
  line-height: 1.6;
  margin: 0;
  font-size: 14px;
}

.hg-aud-top{
  text-align: center;
  margin-bottom: 44px;
}

.hg-aud-mid{
  position: relative;
}

.hg-aud-h3{
  text-align: center;
  font-size: clamp(28px, 3.6vw, 54px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 34px;
}

/* Grid */
.hg-aud-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

@media (max-width: 1100px){
  .hg-aud-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .hg-aud-grid{ grid-template-columns: 1fr; }
}

/* Card */
.hg-aud-card{
  position: relative;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px 18px 18px;
  min-height: 190px;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  overflow: hidden;
}

.hg-aud-card:hover{
  transform: translateY(-6px);
  border-color: rgba(255,85,0,.35);
  background: rgba(255,255,255,.045);
}

/* Big faint number */
.hg-aud-num{
  position: absolute;
  right: 14px;
  top: 10px;
  font-size: 86px;
  font-weight: 900;
  color: rgba(207, 195, 195, 0.06);
  letter-spacing: -0.05em;
  user-select: none;
}

/* Icon */
.hg-aud-ico{
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255,85,0,.12);
  border: 1px solid rgba(255,85,0,.25);
  color: #ff5500;
  margin-bottom: 14px;
}

.hg-aud-ico svg{
  width: 28px;
  height: 28px;
}

.hg-aud-title{
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 800;
}

.hg-aud-desc{
  margin: 0;
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}

/* Center glow dot */
.hg-aud-glow{
  position: absolute;
  left: 50%;
  top: 120px;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #ff5500;
  box-shadow: 0 0 0 10px rgba(255,85,0,.10),
              0 0 0 22px rgba(255,85,0,.06),
              0 0 30px rgba(255,85,0,.55);
  opacity: .9;
  pointer-events: none;
}
/* ===== WHITE SERVICES SECTION ===== */
.hg-services-white{
  background:#f6f7f9;
  padding:90px 0;
}

.hg-container{
  max-width:1180px;
  margin:auto;
  padding:0 20px;
}

/* heading */
.hg-sec-head{
  text-align:center;
  margin-bottom:45px;
}

.hg-tag{
  background:#fff;
  color:#ff5500;
  border:1px solid #ff550030;
  padding:6px 14px;
  border-radius:30px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
}

.hg-sec-head h2{
  font-size:36px;
  margin:12px 0 10px;
  font-weight:800;
}

.hg-sec-head p{
  color:#666;
  font-size:15px;
}

/* grid */
.hg-service-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

@media(max-width:900px){
  .hg-service-grid{grid-template-columns:1fr;}
}

/* card */
.hg-service-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
  display:block;
}

.hg-service-card img{
  width:100%;
  height:320px;
  object-fit:cover;
  display:block;
  transition:.5s;
}

/* overlay */
.hg-s-overlay{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:24px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));
  color:#fff;
}

.hg-s-overlay h3{
  margin:0 0 6px;
  font-size:20px;
  font-weight:700;
}

.hg-s-overlay p{
  font-size:13px;
  opacity:.9;
}

.hg-s-overlay span{
  display:inline-block;
  margin-top:8px;
  font-size:13px;
  color:#ff7733;
  font-weight:600;
}

/* hover premium */
.hg-service-card:hover img{
  transform:scale(1.08);
}
.hg-service-card:hover{
  transform:translateY(-6px);
  transition:.4s;
}
/* ===== SERVICES (EXACT DARK SLIDER STYLE) ===== */
.hg-services-dark{
  background:#1b1b1b;
  padding:72px 0 80px;
  color:#fff;
}
.hg-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.hg-head{ margin-bottom:18px; }
.hg-chip{
  display:inline-block;
  font-size:12px;
  letter-spacing:.18em;
  font-weight:700;
  padding:6px 12px;
  border-radius:999px;
  color:#ff5500;
  background:rgba(255,85,0,.10);
  border:1px solid rgba(255,85,0,.22);
}
.hg-h2{
  margin:12px 0 0;
  font-size:26px;
  font-weight:800;
}

/* Slider */
.hg-slider{
  position:relative;
  margin-top:22px;
}
.hg-track{
  display:flex;
  gap:34px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:10px 6px 6px;
}
.hg-track::-webkit-scrollbar{ height:10px; }
.hg-track::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.10);
  border-radius:999px;
}
.hg-slide{
  scroll-snap-align:start;
  min-width: 440px;          /* look like screenshot */
  max-width: 440px;
}
@media(max-width: 1100px){
  .hg-slide{ min-width: 360px; max-width: 360px; }
}
@media(max-width: 560px){
  .hg-slide{ min-width: 86vw; max-width: 86vw; }
}

/* Card */
.hg-card{
  position:relative;
  display:block;
  border-radius:12px;
  overflow:hidden;
  background:#111;
  box-shadow:0 18px 45px rgba(0,0,0,.35);
  text-decoration:none;
}
.hg-card img{
  width:100%;
  height:300px;
  object-fit:cover;
  display:block;
  transform:scale(1.01);
  transition:transform .45s ease;
}
.hg-card:hover img{ transform:scale(1.07); }

/* Overlay bottom */
.hg-overlay{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:16px 18px;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%);
}
.hg-overlay p{
  margin:0 0 8px;
  font-size:13px;
  line-height:1.5;
  color:rgba(255,255,255,.88);
  max-width: 44ch;
}
.hg-more{
  font-size:12px;
  font-weight:700;
  color:#ff5500;
}

/* Title below card */
.hg-below{
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.92);
}

/* arrows */
.hg-nav{
  position:absolute;
  top:50%;
  transform:translateY(-55%);
  width:44px; height:44px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  z-index:5;
}
.hg-prev{ left:-6px; }
.hg-next{ right:-6px; }
@media(max-width: 900px){
  .hg-nav{ display:none; } /* mobile swipe */
}

/* dots */
.hg-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:22px;
}
.hg-dot{
  width:28px;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:none;
  cursor:pointer;
}
.hg-dot.is-active{
  background:#ff5500;
}
/* ===== PREMIUM FAQ (like your screenshot) ===== */
.hg-faq-premium{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,85,0,.18), rgba(0,0,0,0) 60%),
    #444444;
  padding: 90px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.hg-faq-premium::before{
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .12;
  pointer-events:none;
}

.hg-faq-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 38px;
  align-items: center;
}

@media(max-width: 980px){
  .hg-faq-wrap{ grid-template-columns: 1fr; }
  .hg-faq-right{ display:none; }
}

.hg-faq-pill{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ff5500;
  background: rgba(255,85,0,.12);
  border: 1px solid rgba(255,85,0,.22);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.hg-faq-title{
  margin: 0 0 10px;
  font-size: clamp(28px, 3.6vw, 44px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

.hg-accent{ color:#ff5500; }

.hg-faq-sub{
  margin: 0 0 28px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  font-size: 14px;
  max-width: 70ch;
}

/* Accordion */
.hg-accordion{
  display:flex;
  flex-direction: column;
  gap: 14px;
}

.hg-acc-item{
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.hg-acc-btn{
  width: 100%;
  text-align:left;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.92);
  padding: 18px 18px;
  font-weight: 800;
  font-size: 15px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  cursor:pointer;
}

.hg-acc-ico{
  font-size: 22px;
  opacity:.8;
  transform: rotate(0deg);
  transition: transform .25s ease;
}

.hg-acc-panel{
  padding: 0 18px 18px;
  color: rgba(255,255,255,.72);
  font-size: 13px;
  line-height: 1.7;
  display:none;
}

.hg-acc-item.is-open .hg-acc-panel{ display:block; }
.hg-acc-item.is-open .hg-acc-ico{ transform: rotate(90deg); }

/* Phone image right */
/* FAQ RIGHT IMAGE FIX */
/* ===== FAQ layout + BIG right image ===== */
.hg-faq-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* make right side wider */
  gap: 60px;
  align-items: center;
}

/* Right container */
.hg-faq-right{
  display: flex;
  justify-content: center;
  align-items: center;
}
/* ===== FAQ layout + BIG right image ===== */
.hg-faq-wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;

  display: grid;
  grid-template-columns: 1.1fr 0.9fr;   /* make right side wider */
  gap: 60px;
  align-items: center;
}

/* Right container */
.hg-faq-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The image */
.hg-faq-phone{
  width: 100%;
  max-width: 800px;     /* increase to 700/750 if you want */
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateX(30px);  /* pushes to right like your screenshot */
  filter: drop-shadow(0 22px 60px rgba(0,0,0,.55));
}

/* Mobile */
@media (max-width: 980px){
  .hg-faq-wrap{
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .hg-faq-phone{
    max-width: 520px;
    transform: none;
  }
}

/* =====================
   Global responsive safety
   (prevents horizontal scroll + makes media fit on all screens)
   ===================== */
html{ -webkit-text-size-adjust: 100%; }
body{ overflow-x:hidden; }
img, video, canvas, svg{ max-width:100%; height:auto; }
iframe{ max-width:100%; }
pre, code{ white-space: pre-wrap; word-break: break-word; }
table{ max-width:100%; }
@media (max-width: 576px){
  .container{ padding-left: 16px; padding-right: 16px; }
}
.hg-btn-quote{
  display:inline-block;
  padding:14px 28px;
  background:#ff5500;
  color:#fff;
  font-weight:600;
  border-radius:30px;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(255,85,0,0.35);
  transition:all .5s ease;
}

.hg-btn-quote:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 35px rgba(255,85,0,0.45);
  background:#ff661a;
}
.hg-clients-strip{
  padding:40px 20px;
  background:#fafafa;
  text-align:center;
}

.hg-clients-label{
  font-size:80px;
  font-weight:600;
  margin-bottom:25px;
}

.hg-clients-track{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:80px;
  flex-wrap:wrap;
}

.hg-client-logo img{
  height:100px;
  width:auto;
  opacity:0.8;
  transition:0.3s;
}

.hg-client-logo img:hover{
  opacity:1;
  transform:scale(1.05);
}

.product-bullets{
  margin: 0;
  padding-left: 18px;
}
.product-bullets li{
  margin-bottom: 8px;
  color: #444;
  line-height: 1.6;
}
.inquiry-btn{
padding:12px 28px;
font-weight:600;
border-radius:8px;
font-size:15px;
transition:all .25s ease;
}

.inquiry-btn:hover{
background:#ff6b00;
border-color:#ff6b00;
color:#fff;
}
.corp-tile{
  transition: all .25s ease;
}

.corp-tile:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0,0,0,.08) !important;
}

.card-cta .btn{
  border-radius: 8px;
  font-weight: 600;
}

.list-group-item.active{
  background: #0d6efd;
  border-color: #0d6efd;
}

.badge.text-wrap{
  white-space: normal;
  max-width: 130px;
  line-height: 1.25;
}
/* ===== HandyGoan Orange Buttons ===== */

.btn-dark,
.product-btn,
button.btn-dark {
  background: #ff7a00 !important;
  border-color: #ff7a00 !important;
  color: #fff !important;
}

.btn-dark:hover,
.product-btn:hover,
button.btn-dark:hover {
  background: #e86d00 !important;
  border-color: #e86d00 !important;
  transform: translateY(-2px);
}

/* Apply Filters button */
.filter-box .btn-dark{
  background:#ff7a00 !important;
  border-color:#ff7a00 !important;
}

/* Reset button */
.filter-box .btn-outline-secondary{
  border-color:#ff7a00;
  color:#ff7a00;
}

.filter-box .btn-outline-secondary:hover{
  background:#ff7a00;
  color:white;
}

/* View Details button */
.product-btn{
  background:#fa5902 !important;
  border:none;
  font-weight:700;
}

/* Enquire Button */
.pd-btn.btn-dark{
  background:#ff7a00 !important;
  border-color:#ff7a00 !important;
}
.yt-video-card{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 420px;
  background:#000;
}

.yt-video-thumb{
  position: relative;
  width:100%;
  height:100%;
  cursor:pointer;
}

.yt-thumb-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.yt-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
      to top,
      rgba(0,0,0,0.7),
      rgba(0,0,0,0.2)
  );
}

/* PLAY BUTTON */

.yt-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:80px;
  height:60px;
  background:#ff0000;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
}

.yt-triangle{
  width:0;
  height:0;
  border-left:20px solid white;
  border-top:12px solid transparent;
  border-bottom:12px solid transparent;
  margin-left:4px;
}

/* TEXT BOTTOM */

.yt-bottom{
  position:absolute;
  bottom:20px;
  left:20px;
  color:white;
}

.yt-bottom h3{
  margin:6px 0 0;
  font-size:24px;
}

.yt-time{
  background:rgba(0,0,0,0.7);
  padding:6px 10px;
  border-radius:8px;
  font-size:12px;
}