.elementor-kit-4872{--e-global-color-primary:#6b39f4;--e-global-color-secondary:#9e17f1;--e-global-color-tertiary:#c5d4fb;--e-global-color-quaternary:#d6efe8;--e-global-color-primary_hover:#7e52f6;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-4872 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.page-title{display:var(--page-title-display);}@media(max-width:991px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================================
   FIX: Internal service pages hero & sections must be BOXED
   Homepage remains full-width
   ========================================================= */

body.elementor-page:not(.home) .site-main .elementor-section{
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* Safety: prevent visual horizontal overflow */
body.elementor-page:not(.home) .site-content{
  overflow-x: hidden;
}

/* =========================================================
   Smart GST Planner — Global UI System (Typography + Layout)
   Paste into: Appearance → Customize → Additional CSS
   ========================================================= */

/* 1) Design tokens */
:root{
  /* Brand / theme */
  --c-primary: #1fb6a6;      /* teal (site brand) */
  --c-accent:  #16a34a;      /* trust green */
  --c-bg:      #ffffff;
  --c-surface: #ffffff;
  --c-soft:    #f8fafc;

  /* Text */
  --c-text:    #0f172a;      /* slate-900 */
  --c-body:    #334155;      /* slate-700 */
  --c-muted:   #64748b;      /* slate-500 */
  --c-border:  #e2e8f0;      /* slate-200 */

  /* Effects */
  --shadow-sm: 0 6px 18px rgba(15,23,42,.06);
  --shadow-md: 0 18px 40px rgba(15,23,42,.10);
  --ring:      0 0 0 4px rgba(31,182,166,.18);

  /* Radius */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;

  /* Layout */
  --container: 1200px;
  --gutter: clamp(16px, 3vw, 28px);

  /* Typography */
  --font-sans: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Fluid type scale (desktop↔mobile) */
  --fs-900: clamp(2.05rem, 1.55rem + 1.8vw, 3.1rem);  /* H1 */
  --fs-800: clamp(1.75rem, 1.35rem + 1.3vw, 2.45rem); /* H2 */
  --fs-700: clamp(1.45rem, 1.20rem + 0.9vw, 1.95rem); /* H3 */
  --fs-600: clamp(1.20rem, 1.05rem + 0.6vw, 1.45rem); /* H4 */
  --fs-500: clamp(1.05rem, 0.98rem + 0.35vw, 1.20rem);/* H5 */
  --fs-400: clamp(0.98rem, 0.94rem + 0.2vw, 1.06rem); /* body */
  --fs-350: clamp(0.92rem, 0.89rem + 0.15vw, 0.98rem);/* small */

  /* Line heights (WCAG-friendly for body) */
  --lh-body: 1.6;
  --lh-head: 1.18;

  /* Spacing rhythm */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 32px;
}

/* 2) Base / reset-ish */
html{
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body{
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--c-body);
  background: var(--c-bg);
}
*{ box-sizing: border-box; }
img, video{ max-width:100%; height:auto; }

/* Reduce layout surprises for text spacing (accessibility) */
p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

/* Avoid overly wide text blocks */
:is(p, li, blockquote){
  max-width: 75ch;
}

/* 3) Global link styles */
a{
  color: var(--c-primary);
  text-decoration: none;
  text-underline-offset: 2px;
}
a:hover{ text-decoration: underline; }
a:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 6px;
}

/* 4) Headings (consistent hierarchy) */
h1,h2,h3,h4,h5,h6{
  color: var(--c-text);
  line-height: var(--lh-head);
  margin: 0 0 0.55em;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--fs-900); font-weight: 800; }
h2{ font-size: var(--fs-800); font-weight: 750; }
h3{ font-size: var(--fs-700); font-weight: 700; }
h4{ font-size: var(--fs-600); font-weight: 650; }
h5{ font-size: var(--fs-500); font-weight: 650; }
h6{ font-size: var(--fs-350); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }

/* Optional helper classes */
.tm-kicker, .kicker{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-primary) 85%, #000 15%);
}
.tm-subtitle, .subtitle{
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--c-muted);
  margin-top: -0.2em;
}

/* 5) Buttons (site-wide) */
button,
input[type="button"],
input[type="submit"],
.elementor-button,
a.elementor-button{
  font-family: var(--font-sans);
  font-weight: 800;
  border-radius: 12px;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}
button:active,
.elementor-button:active{ transform: translateY(1px); }

.elementor-button,
a.elementor-button{
  background: var(--c-primary);
  color: #fff !important;
  border: 1px solid transparent;
  box-shadow: 0 14px 22px rgba(31,182,166,.18);
}
.elementor-button:hover,
a.elementor-button:hover{ filter: brightness(.98); text-decoration: none; }
.elementor-button:focus-visible,
a.elementor-button:focus-visible{ outline:none; box-shadow: var(--ring); }

/* Secondary button utility */
.tm-btn-secondary{
  background: #f1f5f9;
  color: var(--c-text);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
}

/* 6) Forms (inputs/select/textarea) */
input, select, textarea{
  font-family: var(--font-sans);
  font-size: 0.95rem;
  line-height: 1.4;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--c-border);
  background: #fff;
  color: var(--c-text);
  box-shadow: 0 2px 0 rgba(15,23,42,.03);
}
input::placeholder, textarea::placeholder{ color:#94a3b8; opacity: 1; }
input:focus, select:focus, textarea:focus{
  outline: none;
  border-color: var(--c-primary);
  box-shadow: var(--ring);
}

/* 7) Cards / content blocks */
.tm-card, .card, .elementor-widget-container .tm-lead-card{
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.tm-card--elevated{ box-shadow: var(--shadow-md); }

/* 8) Section spacing (desktop/tablet/mobile) */
section,
.elementor-section{
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.tm-section, .section{
  padding-top: clamp(28px, 5vw, 70px);
  padding-bottom: clamp(28px, 5vw, 70px);
}

/* Container helper */
.tm-container, .container{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}

/* 9) Lists & icons */
ul, ol{ padding-left: 1.1em; }
li{ margin: 0.35em 0; }
.tm-checklist li::marker{ color: var(--c-accent); }

/* 10) Motion accessibility */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  *,:before,:after{ transition: none !important; animation: none !important; }
}

/* 11) Tablet tweaks (optional; clamp handles most) */
@media (max-width: 1024px){
  :root{ --container: 960px; }
}

/* 12) Mobile tweaks */
@media (max-width: 680px){
  :root{ --container: 100%; }
  h1{ letter-spacing: -0.015em; }
  .tm-kicker, .kicker{ letter-spacing: .08em; }
}
/* FIX: Internal pages par section background bhi boxed rahe */
body.elementor-page:not(.home) .site-main .elementor-section{
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
}/* End custom CSS */