/* Start custom CSS for html, class: .elementor-element-b60ae52 *//* =========================================================
   BizFyle Once-a-Year Bookkeeping CSS
   Clean version for editing
   - Original green theme preserved
   - Header/nav CSS removed
   - Footer CSS removed
   - Section 06 CSS removed
   - Section 07 CSS removed
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap");
*, *::before, *::after {
  box-sizing:border-box;
  margin:0;
  padding:0
}

:root {
    --gd:#1a5c2e;
  --gm:#2d7d46;
  --gb:#3fa85f;
  --gl:#d4f0dc;
  --gx:#eef8f1;

    --tl:#0d7377;
  --tld:#085a5d;
  --tlx:#e0f5f5;
  --tlm:#b0e4e5;

    --bl:#1a6fa8;
  --blx:#e3f1fb;
  --bld:#134e78;

    --pu:#6b3fa0;
  --pux:#f0eafa;

    --accent:#2d7d46;
  --accent-light:#eef8f1;

    --co:#b91c1c;
  --cox:#fef2f2;

    --gy9:#0f1410;
  --gy8:#1e2420;
  --gy7:#3a3d3a;

    --gy6:#52575a;
  --gy5:#6b706b;
  --gy4:#9a9e9a;

    --gy3:#b8bcb8;
  --gy2:#d0d3d0;
  --gy1:#e8eae8;
  --gy0:#f4f5f4;

    --off:#f7faf8;
  --wh:#fff;

    --rsm:8px;
  --rmd:14px;
  --rlg:22px;
  --rxl:38px;

    --s1:0 2px 10px rgba(0, 0, 0, .06);
  --s2:0 4px 24px rgba(0, 0, 0, .09);
  --s3:0 8px 40px rgba(0, 0, 0, .13)
}

body {
  font-family:'Poppins', sans-serif;
  color:var(--gy7);
  background:var(--wh);
  line-height:1.75;
  font-size:16px
}

/* ── HERO ── */

.hero {
  position:relative;
  overflow:hidden;
  padding:90px 24px 116px;

    background:linear-gradient(140deg, #060e08 0%, #0d2218 26%, var(--gd) 56%, #085053 100%)
}

.dots {
  position:absolute;
  inset:0;
  opacity:.035;

    background-image:radial-gradient(circle, #fff 1px, transparent 1px);
  background-size:32px 32px
}

.o1 {
  position:absolute;
  top:-100px;
  right:-80px;
  width:440px;
  height:440px;
  border-radius:50%;

    background:radial-gradient(circle, rgba(61, 168, 95, .16) 0%, transparent 68%)
}

.o2 {
  position:absolute;
  bottom:-80px;
  left:-20px;
  width:340px;
  height:340px;
  border-radius:50%;

    background:radial-gradient(circle, rgba(13, 115, 119, .2) 0%, transparent 68%)
}

.o3 {
  position:absolute;
  top:40%;
  right:16%;
  width:160px;
  height:160px;
  border-radius:50%;

    background:radial-gradient(circle, rgba(63, 168, 95, .12) 0%, transparent 68%)
}

.hero-i {
  max-width:1180px;
  margin:0 auto;
  position:relative;
  z-index:1;

    display:grid;
  grid-template-columns:1fr 300px;
  gap:52px;
  align-items:center
}

@media(max-width:900px) {
  .hero-i {
    grid-template-columns:1fr
  }

  .hp {
    display:none!important
  }

}

.badge {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255, 255, 255, .11);

    border:1px solid rgba(255, 255, 255, .2);
  border-radius:100px;
  padding:6px 16px;

    font-size:12px;
  font-weight:700;
  letter-spacing:.5px;
  color:#fff;
  margin-bottom:22px
}

.pulse {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#7eed9a;
  animation:blink 2s infinite
}

@keyframes blink {
  0%, 100% {
    opacity:1
  }

  50% {
    opacity:.35
  }

}

.hero h1 {
  font-family:'Poppins', sans-serif;
  font-size:clamp(26px, 4vw, 46px);

    font-weight:800;
  line-height:1.16;
  color:#fff;
  margin-bottom:18px
}

.hero h1 em {
  font-style:italic;
  color:#a8f0be
}

.hero-sub {
  font-size:17px;
  color:rgba(255, 255, 255, .78);
  max-width:560px;

    margin-bottom:36px;
  line-height:1.78
}

.hbtns {
  display:flex;
  gap:14px;
  flex-wrap:wrap
}

.btn-hp {
  display:inline-flex;
  align-items:center;
  gap:8px;

    background:linear-gradient(135deg, #3fa85f 0%, #0d9488 100%);
  color:#fff;

    padding:15px 32px;
  border-radius:100px;
  font-size:15px;
  font-weight:700;

    text-decoration:none;
  box-shadow:0 4px 22px rgba(13, 148, 136, .5);
  transition:.2s
}

.btn-hp:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 30px rgba(13, 148, 136, .6)
}

.btn-hg {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:rgba(255, 255, 255, .78);

    padding:15px 22px;
  border-radius:100px;
  font-size:15px;
  font-weight:500;

    text-decoration:none;
  border:1.5px solid rgba(255, 255, 255, .24);
  transition:.2s
}

.btn-hg:hover {
  background:rgba(255, 255, 255, .09);
  color:#fff
}

.hm {
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  margin-top:30px
}

.hm span {
  font-size:12.5px;
  color:rgba(255, 255, 255, .5)
}

/* hero right panel */

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

.hpc {
  background:rgba(255, 255, 255, .1);
  border:1px solid rgba(255, 255, 255, .16);

    border-radius:var(--rmd);
  padding:16px 18px;
  backdrop-filter:blur(8px);

    display:flex;
  align-items:center;
  gap:14px
}

.hpc .hpi {
  font-size:26px
}

.hpc-txt .ht {
  font-size:13px;
  color:rgba(255, 255, 255, .88);
  font-weight:700;
  line-height:1.4
}

.hpc-txt .hs {
  font-size:11px;
  color:rgba(255, 255, 255, .45);
  margin-top:2px
}

/* ── LAYOUT ── */

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

.grid {
  display:grid;
  grid-template-columns:252px minmax(0, 1fr);
  gap:44px;

    align-items:start;
  padding-top:54px
}

@media(max-width:920px) {
  .grid {
    grid-template-columns:1fr
  }

  .sb {
    position:static!important
  }

}

.col {
  min-width:0
}

.sb {
  position:sticky;
  top:72px
}

/* ── TOC ── */

.toc {
  background:var(--gx);
  border:1.5px solid var(--gl);
  border-radius:var(--rmd);
  padding:22px 20px
}

.toc-hd {
  font-size:11px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;

    color:var(--tl);
  margin-bottom:14px;
  display:flex;
  align-items:center;
  gap:7px
}

.toc-hd svg {
  width:14px;
  height:14px
}

.toc ol {
  padding-left:16px
}

.toc li {
  margin-bottom:8px
}

.toc a {
  color:var(--gd);
  text-decoration:none;
  font-size:13px;
  font-weight:500;

    line-height:1.45;
  transition:color .15s
}

.toc a:hover {
  color:var(--tl)
}

.toc hr {
  border:none;
  border-top:1px solid var(--gl);
  margin:14px 0
}

.toc-cta {
  background:linear-gradient(135deg, var(--gd) 0%, var(--tl) 100%);

    border-radius:var(--rsm);
  padding:16px;
  text-align:center;
  margin-top:16px
}

.toc-cta p {
  font-size:12px;
  color:rgba(255, 255, 255, .75);
  margin-bottom:10px;
  line-height:1.5
}

.toc-cta a {
  display:block;
  background:#fff;
  color:var(--gd);
  font-size:13px;
  font-weight:700;

    padding:9px 14px;
  border-radius:100px;
  text-decoration:none;
  transition:.2s
}

.toc-cta a:hover {
  background:var(--gx)
}

/* ── SECTIONS ── */

.sec {
  margin:56px 0
}

.sl {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:800;

    letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--tl);
  margin-bottom:10px
}

.sl::before {
  content:'';
  display:inline-block;
  width:16px;
  height:2px;
  background:var(--tl);
  border-radius:2px
}

h2 {
  font-family:'Poppins', sans-serif;
  font-size:clamp(21px, 3vw, 31px);
  font-weight:700;

    line-height:1.25;
  color:var(--gy9);
  margin-bottom:16px
}

h3 {
  font-size:18px;
  font-weight:700;
  color:var(--gy9);
  margin:28px 0 10px
}

p {
  margin-bottom:17px;
  font-size:15.5px;
  color:var(--gy7)
}

strong {
  color:var(--gy9)
}

ul.pl {
  padding-left:20px;
  margin-bottom:16px
}

ul.pl li {
  font-size:15px;
  color:var(--gy7);
  margin-bottom:7px
}

.div {
  border:none;
  border-top:1.5px solid var(--gy1);
  margin:48px 0
}

/* ── SNIPPET ── */

.snip {
  background:linear-gradient(135deg, var(--blx), #f0f7ff);

    border:1.5px solid #b3d9f5;
  border-radius:var(--rmd);
  padding:22px 26px;
  margin:26px 0
}

.snip-l {
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1.2px;
  text-transform:uppercase;

    color:var(--bl);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:6px
}

.snip p {
  font-size:14.5px;
  margin-bottom:0;
  color:var(--gy7)
}

/* ── CALLOUTS ── */

.co {
  border-radius:var(--rmd);
  padding:20px 24px;
  margin:24px 0;
  display:flex;
  gap:16px
}

.co-icon {
  font-size:24px;
  flex-shrink:0;
  margin-top:1px
}

.co-body h4 {
  font-size:14.5px;
  font-weight:700;
  margin-bottom:5px
}

.co-body p {
  font-size:14px;
  margin-bottom:0
}

.co.tip  {
  background:var(--accent-light);
  border-left:4px solid var(--accent)
}

.co.tip  .co-body h4 {
  color:var(--gd)
}

.co.inf  {
  background:var(--blx);
  border-left:4px solid var(--bl)
}

.co.inf  .co-body h4 {
  color:var(--bl)
}

.co.ok   {
  background:var(--gx);
   border-left:4px solid var(--gb)
}

.co.ok   .co-body h4 {
  color:var(--gd)
}

.co.teal {
  background:var(--tlx);
  border-left:4px solid var(--tl)
}

.co.teal .co-body h4 {
  color:var(--tl)
}

.co.warn {
  background:var(--cox);
  border-left:4px solid var(--co)
}

.co.warn .co-body h4 {
  color:var(--co)
}

.co.pu   {
  background:var(--pux);
  border-left:4px solid var(--pu)
}

.co.pu   .co-body h4 {
  color:var(--pu)
}

/* ── YEAR COMPARISON VISUAL ── */

.year-compare {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:28px 0
}

@media(max-width:600px) {
  .year-compare {
    grid-template-columns:1fr
  }

}

.yc-card {
  border-radius:var(--rlg);
  overflow:hidden;
  box-shadow:var(--s2)
}

.yc-head {
  padding:20px 24px
}

.yc-head.bad  {
  background:linear-gradient(135deg, #1e2420 0%, var(--gd) 100%)
}

.yc-head.good {
  background:linear-gradient(135deg, #0a2e18 0%, var(--gd) 100%)
}

.yc-label {
  font-size:10.5px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;

    color:rgba(255, 255, 255, .6);
  margin-bottom:6px
}

.yc-head h3 {
  font-size:17px;
  font-weight:700;
  color:#fff;
  margin:0;
  line-height:1.35
}

.yc-body {
  background:#fff;
  padding:20px 24px;
  border:1.5px solid var(--gy1);

    border-top:none;
  border-radius:0 0 var(--rlg) var(--rlg)
}

.yc-item {
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:9px 0;

    border-bottom:1px solid var(--gy1);
  font-size:14px;
  color:var(--gy7)
}

.yc-item:last-child {
  border-bottom:none
}

.yc-icon {
  font-size:16px;
  flex-shrink:0;
  margin-top:1px
}

/* ── TIMELINE ── */

.tl {
  margin:28px 0
}

.tl-row {
  display:flex;
  gap:18px
}

.tl-left {
  display:flex;
  flex-direction:column;
  align-items:center
}

.tl-dot {
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;

    justify-content:center;
  font-size:17px;
  flex-shrink:0;
  color:#fff
}

.td-g {
  background:linear-gradient(135deg, var(--gd), var(--gm))
}

.td-t {
  background:linear-gradient(135deg, var(--tl), var(--tld))
}

.td-b {
  background:linear-gradient(135deg, var(--bl), var(--bld))
}

.td-p {
  background:linear-gradient(135deg, var(--pu), #4d2b7a)
}

.td-a {
  background:linear-gradient(135deg, var(--accent), var(--gm))
}

.tl-line {
  width:2px;
  background:var(--gy1);
  flex:1;
  min-height:24px;
  margin:4px 0
}

.tl-row:last-child .tl-line {
  display:none
}

.tl-body {
  padding:0 0 32px
}

.tl-tag {
  display:inline-block;
  font-size:11px;
  font-weight:700;
  padding:3px 12px;

    border-radius:100px;
  margin-bottom:8px;
  margin-top:4px
}

.tt-g {
  background:var(--gx);
  color:var(--gd)
}

.tt-t {
  background:var(--tlx);
  color:var(--tl)
}

.tt-b {
  background:var(--blx);
  color:var(--bl)
}

.tt-p {
  background:var(--pux);
  color:var(--pu)
}

.tt-a {
  background:var(--accent-light);
  color:var(--gd)
}

.tl-body h4 {
  font-size:17px;
  font-weight:700;
  color:var(--gy9);
  margin-bottom:6px
}

.tl-body p {
  font-size:14.5px;
  color:var(--gy5);
  margin-bottom:0
}

/* ── BENEFIT CARDS ── */

.bcards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
  margin:24px 0
}

.bcard {
  background:#fff;
  border:1.5px solid var(--gy1);
  border-radius:var(--rmd);

    padding:22px;
  box-shadow:var(--s1);
  transition:box-shadow .2s, transform .2s;

    position:relative;
  overflow:hidden
}

.bcard::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:4px;
  height:100%;

    background:linear-gradient(180deg, var(--gb) 0%, var(--tl) 100%)
}

.bcard:hover {
  box-shadow:var(--s2);
  transform:translateY(-2px)
}

.bcard .ic {
  font-size:28px;
  margin-bottom:12px
}

.bcard h4 {
  font-size:15px;
  font-weight:700;
  margin-bottom:7px;
  color:var(--gy9)
}

.bcard p {
  font-size:13px;
  color:var(--gy5);
  margin-bottom:0;
  line-height:1.6
}

/* ── ALL-IN-ONE SECTION ── */

.aio-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:14px;
  margin:24px 0
}

.aio-card {
  border-radius:var(--rmd);
  padding:20px 18px;
  position:relative;
  overflow:hidden;

    background:#fff;
  border:1.5px solid var(--gy1);
  box-shadow:var(--s1);

    transition:box-shadow .2s, transform .2s
}

.aio-card:hover {
  box-shadow:var(--s2);
  transform:translateY(-2px)
}

.aio-card .aio-icon {
  font-size:28px;
  margin-bottom:12px
}

.aio-card h4 {
  font-size:14.5px;
  font-weight:700;
  color:var(--gd);
  margin-bottom:6px
}

.aio-card p {
  font-size:13px;
  color:var(--gy5);
  margin-bottom:0;
  line-height:1.6
}

/* ── SERVICE CARDS ── */

.svc {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:14px;
  margin:24px 0
}

.sv {
  background:#fff;
  border:1.5px solid var(--gy1);
  border-radius:var(--rmd);

    padding:18px;
  display:flex;
  align-items:flex-start;
  gap:14px;

    box-shadow:var(--s1);
  transition:box-shadow .2s, transform .2s
}

.sv:hover {
  box-shadow:var(--s2);
  transform:translateY(-1px)
}

.sv-i {
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--gx);

    border:1.5px solid var(--gl);
  display:flex;
  align-items:center;

    justify-content:center;
  flex-shrink:0
}

.sv-i svg {
  width:14px;
  height:14px;
  stroke:var(--gb);
  stroke-width:2.5;
  fill:none
}

.sv p {
  font-size:14px;
  font-weight:600;
  color:var(--gy9);
  margin:0;
  padding-top:4px;
  line-height:1.45
}

/* ── FAQ ── */

.fi {
  border:1.5px solid var(--gy1);
  border-radius:var(--rmd);

    margin-bottom:10px;
  overflow:hidden;
  transition:border-color .2s
}

.fi.open {
  border-color:var(--gl);
  box-shadow:var(--s1)
}

.fq {
  display:flex;
  justify-content:space-between;
  align-items:center;

    padding:18px 22px;
  cursor:pointer;
  font-weight:600;
  font-size:15px;

    color:var(--gy9);
  background:#fff;
  transition:background .15s;
  gap:16px
}

.fq:hover {
  background:var(--off)
}

.ft {
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--gx);

    border:1.5px solid var(--gl);
  display:flex;
  align-items:center;

    justify-content:center;
  font-size:18px;
  color:var(--gb);
  flex-shrink:0;

    transition:transform .2s, background .2s
}

.fi.open .ft {
  transform:rotate(45deg);
  background:var(--gb);
  color:#fff;
  border-color:var(--gb)
}

.fa {
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease
}

.fi.open .fa {
  max-height:360px
}

.fa-i {
  padding:0 22px 20px;
  font-size:14.5px;
  color:var(--gy5);
  line-height:1.75
}

/* ── STRIP ── */

.strip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;

    background:linear-gradient(120deg, var(--gx) 0%, var(--tlx) 100%);

    border:1.5px solid var(--gl);
  border-radius:var(--rmd);
  padding:24px 28px;
  margin:36px 0
}

.strip h4 {
  font-size:16px;
  font-weight:700;
  color:var(--gd);
  margin-bottom:4px
}

.strip p {
  font-size:13.5px;
  color:var(--gy5);
  margin-bottom:0
}

.btn-s {
  background:linear-gradient(135deg, var(--gd) 0%, var(--tl) 100%);
  color:#fff;

    padding:12px 26px;
  border-radius:100px;
  font-size:14px;
  font-weight:700;

    text-decoration:none;
  white-space:nowrap;
  box-shadow:0 3px 14px rgba(13, 115, 119, .35);

    transition:transform .15s, box-shadow .15s
}

.btn-s:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 22px rgba(13, 115, 119, .45)
}

/* ── FINAL CTA ── */

.cta-f {
  position:relative;
  overflow:hidden;

    background:linear-gradient(140deg, #060e08 0%, #0d2218 30%, var(--gd) 60%, #085053 100%);

    border-radius:var(--rxl);
  padding:72px 52px;
  text-align:center;
  margin:64px 0 40px
}

.cta-f::before {
  content:'';
  position:absolute;
  top:-60px;
  right:-60px;
  width:280px;
  height:280px;

    border-radius:50%;
  background:radial-gradient(circle, rgba(61, 168, 95, .15) 0%, transparent 70%)
}

.cta-f::after {
  content:'';
  position:absolute;
  bottom:-60px;
  left:-40px;
  width:240px;
  height:240px;

    border-radius:50%;
  background:radial-gradient(circle, rgba(13, 115, 119, .18) 0%, transparent 70%)
}

.cta-fi {
  position:relative;
  z-index:1
}

.cta-ey {
  display:inline-flex;
  align-items:center;
  gap:8px;

    background:rgba(255, 255, 255, .12);
  border:1px solid rgba(255, 255, 255, .2);

    border-radius:100px;
  padding:6px 16px;
  font-size:11.5px;
  font-weight:800;

    color:#a8f0be;
  letter-spacing:.6px;
  text-transform:uppercase;
  margin-bottom:20px
}

.cta-f h2 {
  font-family:'Poppins', sans-serif;
  color:#fff;

    font-size:clamp(22px, 3.5vw, 36px);
  margin-bottom:14px
}

.cta-sub {
  color:rgba(255, 255, 255, .7);
  font-size:16px;
  margin-bottom:36px;

    max-width:520px;
  margin-left:auto;
  margin-right:auto
}

.cta-btns {
  display:flex;
  gap:16px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:30px
}

.btn-fp {
  display:inline-flex;
  align-items:center;
  gap:8px;

    background:linear-gradient(135deg, #3fa85f 0%, #0d9488 100%);
  color:#fff;

    padding:16px 38px;
  border-radius:100px;
  font-size:16px;
  font-weight:700;

    text-decoration:none;
  box-shadow:0 6px 26px rgba(13, 148, 136, .5);
  transition:.2s
}

.btn-fp:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 34px rgba(13, 148, 136, .6)
}

.btn-fs {
  display:inline-flex;
  align-items:center;
  gap:8px;

    background:rgba(255, 255, 255, .1);
  color:#fff;
  padding:16px 32px;

    border-radius:100px;
  font-size:16px;
  font-weight:600;
  text-decoration:none;

    border:1.5px solid rgba(255, 255, 255, .28);
  transition:.2s
}

.btn-fs:hover {
  background:rgba(255, 255, 255, .18)
}

.trust {
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap
}

.tb {
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:rgba(255, 255, 255, .45)
}

.tb .d {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7eed9a
}

/* ── HIGHLIGHT ── */

.hl-text {
  background:linear-gradient(180deg, transparent 60%, rgba(168, 240, 190, .35) 60%);
  padding:0 2px
}

@media(max-width:640px) {
    .hero {
    padding:62px 18px 82px
  }

  .cta-f {
    padding:48px 22px
  }

  .strip {
    flex-direction:column;
    align-items:flex-start
  }

}/* End custom CSS */