/* ══════════════════════════════════════════════════════════════════════
   GSTWali Official Unified Header & Footer (100% Matches Homepage)
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --gw-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gw-primary: #0071E3;
  --gw-primary-dark: #005BB5;
  --gw-border: #E5E5EA;
  --gw-border-subtle: #F2F2F7;
  --gw-text-primary: #1D1D1F;
  --gw-text-secondary: #6E6E73;
  --gw-text-muted: #86868B;
  --gw-grey-text: #64748B;
}

header.custom-navbar, footer.custom-footer {
  font-family: var(--gw-font) !important;
  box-sizing: border-box !important;
  -webkit-font-smoothing: antialiased !important;
  width: 100% !important;
}
header.custom-navbar *, footer.custom-footer * {
  box-sizing: border-box !important;
}

/* ── HEADER ───────────────────────────────────────────────────────── */
header.custom-navbar {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 64px !important;
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--gw-border) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

.nav-inner {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
}
@media (max-width: 640px) {
  .nav-inner { padding: 0 16px !important; }
}

/* Logo */
.nav-logo-link {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
  margin-right: 18px !important;
}
.nav-logo-img {
  height: 32px !important;
  width: auto !important;
  object-fit: contain !important;
}
@media (max-width: 480px) {
  .nav-logo-img { height: 26px !important; }
}

/* Nav links row */
.nav-links-row {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  flex: 1 !important;
}
@media (max-width: 1024px) {
  .nav-links-row { display: none !important; }
}

.nav-item-dropdown {
  position: relative !important;
  display: inline-block !important;
}

.nav-link-btn {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 8px 11px !important;
  font-family: var(--gw-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gw-text-primary) !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
}
.nav-link-btn:hover {
  background: rgba(0, 0, 0, 0.04) !important;
  color: var(--gw-primary) !important;
}
.nav-link-btn svg {
  width: 15px !important;
  height: 15px !important;
  fill: var(--gw-text-secondary) !important;
}

/* Dropdown menu */
.dropdown-content {
  display: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  min-width: 320px !important;
  background: #FFFFFF !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 32px rgba(0,0,0,0.08) !important;
  padding: 10px !important;
  z-index: 1001 !important;
}
.nav-item-dropdown:hover .dropdown-content {
  display: block !important;
}
.dropdown-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  background: transparent !important;
}
.dropdown-item:hover {
  background: #F8FAFC !important;
}
.dd-icon-box {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  flex-shrink: 0 !important;
}
.dd-title {
  font-family: var(--gw-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--gw-text-primary) !important;
}
.dd-sub {
  font-size: 11.5px !important;
  color: var(--gw-text-muted) !important;
  line-height: 1.35 !important;
}
.dropdown-footer {
  border-top: 1px solid var(--gw-border-subtle) !important;
  margin-top: 6px !important;
  padding-top: 8px !important;
  text-align: center !important;
}
.dropdown-footer a {
  font-family: var(--gw-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--gw-primary) !important;
}

/* Right buttons */
.nav-right-btns {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.nav-signin-btn {
  font-family: var(--gw-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--gw-text-primary) !important;
  padding: 6px 10px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
}
@media (max-width: 600px) {
  .nav-signin-btn { display: none !important; }
}
.nav-signin-btn:hover { color: var(--gw-primary) !important; }
.nav-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  font-family: var(--gw-font) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  border-radius: 980px !important;
  background: linear-gradient(180deg, #0071E3 0%, #005BB5 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(0, 113, 227, 0.28) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}
@media (max-width: 480px) {
  .nav-cta-btn { padding: 6px 12px !important; font-size: 12px !important; }
}
.nav-cta-btn:hover {
  box-shadow: 0 6px 20px rgba(0, 113, 227, 0.42) !important;
  transform: translateY(-1px) !important;
}

/* Mobile Hamburger Menu Button */
.mobile-menu-btn {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: transparent !important;
  border: 1px solid var(--gw-border) !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  color: var(--gw-text-primary) !important;
  margin-left: 6px !important;
}
@media (max-width: 1024px) {
  .mobile-menu-btn { display: flex !important; }
}
.mobile-menu-btn svg { width: 22px !important; height: 22px !important; fill: currentColor !important; }

/* Mobile Drawer */
.mobile-drawer-overlay {
  display: none;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  z-index: 2000 !important;
  pointer-events: none;
}
.mobile-drawer-overlay.active {
  display: block !important;
  pointer-events: auto !important;
}
.mobile-drawer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  max-height: 88vh !important;
  background: #FFFFFF !important;
  border-radius: 24px 24px 0 0 !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.16) !important;
  z-index: 2001 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}
.mobile-drawer-handle {
  width: 36px !important;
  height: 4px !important;
  background: #D1D1D6 !important;
  border-radius: 2px !important;
  margin: 10px auto 4px !important;
}
.mobile-drawer-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 20px 12px !important;
  border-bottom: 1px solid var(--gw-border-subtle) !important;
}
.mobile-drawer-close-btn {
  background: #F2F2F7 !important;
  border: none !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #6E6E73 !important;
}
.mobile-drawer-content {
  padding: 16px 20px 32px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 !important;
}
.mobile-menu-section-title {
  font-family: var(--gw-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  color: var(--gw-text-muted) !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  margin: 14px 0 8px !important;
}
.mobile-menu-section-title:first-child { margin-top: 0 !important; }
.mobile-drawer-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  margin-bottom: 4px !important;
}
.mobile-drawer-item:hover, .mobile-drawer-item:active {
  background: #F8FAFC !important;
}
.mobile-drawer-item.highlight {
  background: #EBF5FF !important;
  border: 1px solid #BFDBFE !important;
}
.mobile-drawer-item-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 9px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}
.mobile-drawer-item-title {
  font-family: var(--gw-font) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: var(--gw-text-primary) !important;
}
.mobile-drawer-item-sub {
  font-size: 11.5px !important;
  color: var(--gw-text-muted) !important;
  line-height: 1.35 !important;
}

/* ── 9. PROFESSIONAL 5-COLUMN FOOTER ───────────────────────────────── */
footer.custom-footer {
  background: #F8FAFC !important;
  border-top: 1px solid #E2E8F0 !important;
  padding: 44px 0 0 !important;
  text-align: left !important;
  margin-top: 56px !important;
  display: block !important;
}
.footer-container {
  max-width: 1160px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
@media (max-width: 640px) {
  .footer-container { padding: 0 16px !important; }
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 3fr 2fr 2fr 2fr 2fr !important;
  gap: 36px !important;
  margin-bottom: 36px !important;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
}
@media (max-width: 540px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
}
.footer-heading {
  font-family: var(--gw-font) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #1D1D1F !important;
  margin-bottom: 14px !important;
}
.footer-links-list {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 0 !important;
  margin: 0 !important;
}
.footer-links-list a {
  font-size: 13.5px !important;
  color: var(--gw-grey-text) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}
.footer-links-list a:hover {
  color: var(--gw-primary) !important;
}
.newsletter-form {
  display: flex !important;
  max-width: 100% !important;
  margin-top: 10px !important;
}
.newsletter-input {
  flex: 1 !important;
  height: 40px !important;
  padding: 0 12px !important;
  border: 1px solid #E2E8F0 !important;
  border-right: none !important;
  border-radius: 8px 0 0 8px !important;
  font-size: 12.5px !important;
  outline: none !important;
  min-width: 0 !important;
  background: #FFFFFF !important;
}
.newsletter-btn {
  height: 40px !important;
  padding: 0 14px !important;
  background: var(--gw-primary) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 0 8px 8px 0 !important;
  font-family: var(--gw-font) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
}
.newsletter-btn:hover { background: var(--gw-primary-dark) !important; }

.footer-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--gw-grey-text) !important;
  margin-bottom: 8px !important;
}
.footer-contact-row svg { width: 14px !important; height: 14px !important; fill: var(--gw-grey-text) !important; }
.social-icons-row {
  display: flex !important;
  gap: 10px !important;
  margin-top: 14px !important;
}
.social-icon-btn {
  width: 34px !important;
  height: 34px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
}
.social-icon-btn svg { width: 15px !important; height: 15px !important; fill: var(--gw-grey-text) !important; }
.social-icon-btn:hover { border-color: var(--gw-primary) !important; }
.social-icon-btn:hover svg { fill: var(--gw-primary) !important; }

.footer-bottom-bar {
  border-top: 1px solid #E2E8F0 !important;
  padding: 18px 0 !important;
}
.footer-bottom-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 12.5px !important;
  color: var(--gw-grey-text) !important;
}
.pay-badge {
  display: inline-block !important;
  padding: 3px 8px !important;
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 6px !important;
  font-family: var(--gw-font) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  color: var(--gw-grey-text) !important;
}

/* ── 10. VIRAL SHARE & BOOKMARK CARD ──────────────────────────────── */
.viral-share-card {
  background: #FFFFFF !important;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  margin: 18px 0 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
}
.viral-share-info {
  flex: 1 1 300px !important;
}
.viral-share-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 9px !important;
  background: #ECFDF5 !important;
  color: #065F46 !important;
  border: 1px solid #A7F3D0 !important;
  border-radius: 99px !important;
  font-family: var(--gw-font) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.3px !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
.viral-share-title {
  font-family: var(--gw-font) !important;
  font-weight: 800 !important;
  font-size: 14.5px !important;
  color: #0F172A !important;
  margin-bottom: 2px !important;
  letter-spacing: -0.2px !important;
}
.viral-share-sub {
  font-size: 12.5px !important;
  color: #64748B !important;
  line-height: 1.4 !important;
}
.viral-share-btns {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.btn-whatsapp-share {
  background: #25D366 !important;
  color: #FFFFFF !important;
  padding: 9px 15px !important;
  border-radius: 10px !important;
  font-family: var(--gw-font) !important;
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  box-shadow: 0 2px 10px rgba(37, 211, 102, 0.28) !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}
.btn-whatsapp-share:hover {
  background: #20BA5C !important;
  transform: translateY(-1px) !important;
  color: #FFFFFF !important;
}
.btn-action-tool {
  background: #F8FAFC !important;
  color: #334155 !important;
  border: 1.5px solid #CBD5E1 !important;
  padding: 9px 13px !important;
  border-radius: 10px !important;
  font-family: var(--gw-font) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}
.btn-action-tool:hover {
  background: #EEF2FF !important;
  border-color: #94A3B8 !important;
  color: #0F172A !important;
}
.btn-action-tool.bookmark {
  background: #FFFBEB !important;
  color: #92400E !important;
  border-color: #FDE68A !important;
}
.btn-action-tool.bookmark:hover {
  background: #FEF3C7 !important;
  border-color: #F59E0B !important;
}