#hero{border-radius:24px;position:relative;overflow:hidden;& img{object-fit:cover;filter:brightness(60%);z-index:0;width:100%;height:100%;position:absolute;top:0;left:0}& .hero-txt{background:var(--black-color);border-radius:24px;flex-direction:column;justify-content:center;align-items:center;min-height:16rem;padding:32px;display:flex;position:relative;overflow:hidden;& h1{margin-bottom:.5rem;font-size:28px;font-weight:700}& p{font-size:16px;font-weight:500}& img{z-index:0}& h1,& p{z-index:1;position:relative}}&>div{z-index:1;color:#fff;flex-direction:column;justify-content:space-between;align-items:center;display:flex;position:relative;& h3{font-size:20px;font-weight:600}&>div:first-child{max-width:584px;margin-left:auto;margin-right:auto}& .card{color:#000;text-align:left;background:#fff;border-radius:24px;max-width:336px;padding:24px;& h3{letter-spacing:-.15px;font-size:24px;line-height:32px}& p.anything{margin-bottom:1rem;margin-left:1.5rem}& p.small{text-align:center;color:var(--black-color);margin-top:10px;font-size:12px}& a{white-space:nowrap;box-sizing:border-box;width:100%;max-width:100%;display:inline-flex;& span{display:inline-block}& svg{max-width:unset;flex-shrink:0}}}}}.description{&>*{margin-bottom:1rem}}#features{flex-wrap:wrap;gap:2rem 1rem;display:flex;&>div{flex-basis:100%}& svg{width:38px;height:38px;margin-bottom:1rem}}#why{& h2{margin-bottom:2rem;font-size:30px;font-weight:600}&>div{flex-direction:column;gap:2rem 1rem;&>div{flex-basis:100%}&>div:first-child{& p{font-size:18px}}& .why-four-points{flex-wrap:wrap;align-content:flex-start;gap:2rem 0;display:flex;&>div{flex-basis:100%;padding-left:1rem;&>div{margin-bottom:.5rem;& p{font-weight:600}}}}}}#what-do{& h2{margin-bottom:2rem;font-size:30px;font-weight:600}&>div{column-count:1}}#step-cards{& .step-cards-container{flex-direction:column;gap:.8rem;display:flex}& .card{border-top-left-radius:40px;border-bottom-right-radius:40px;padding:2rem;box-shadow:8px 8px 43px #08324f1a;& .step-no{width:60px;height:60px;color:var(--primary-color);background:#eff7ff;border-radius:160px;justify-content:center;align-items:center;margin-bottom:1rem;font-weight:600;display:flex}& h3{color:var(--black-color);margin-bottom:10px;font-size:20px;font-weight:500}& .desc{color:#696687}}&>a{margin-inline:auto;margin-top:2rem}}.breadcrumb{align-items:center;gap:.2rem;margin-block:1rem;font-size:14px;display:flex;& a{color:var(--primary-color)}& svg{width:12px;height:12px;color:var(--primary-color);transform:rotate(-20deg)}& p{font-weight:500}}.accordion{border-radius:var(--radius);background:#fff;margin-bottom:1rem;padding:1rem;& .accordion-header{cursor:pointer;justify-content:space-between;align-items:center;display:flex;& h5{font-weight:500}}& .accordion-body{max-height:0;margin-top:0;transition:max-height .3s,margin-top .3s;overflow-y:hidden;&.open{max-height:2000px;margin-top:1rem}}}#faqs{background:var(--primary-color-light);border-radius:calc(var(--radius) * 2);padding:1rem;& h2{margin-bottom:2rem;font-size:30px;font-weight:600}}#related{flex-direction:column;gap:1rem;display:flex;& .related-card{border-radius:var(--radius);background:#f3f3f7;flex-basis:50%;padding:1rem;& button{text-align:end;width:100%;color:var(--primary-color);background:0 0;border:none;outline:none;font-size:14px}& h5{margin-bottom:.5rem;font-size:20px;font-weight:500}& a{color:var(--primary-color);margin-bottom:.7rem;display:block}& .hidden{visibility:hidden;display:none}& .links.column{column-count:2}}}#statistics{text-align:center;font-size:18px;&>div{flex-direction:column;align-items:center;gap:1rem;margin-bottom:1rem;display:flex;&>div{background:var(--primary-color-light);border-radius:var(--radius);width:100%;padding:2rem;& p:first-of-type{font-size:32px;font-weight:600}}}}@media (width>=768px){#hero{background:var(--black-color);padding:32px;&>div{flex-direction:row}& .hero-txt{background:0 0;padding:0;& h1{font-size:60px}& p{font-size:22px}}}#features{flex-wrap:nowrap;gap:1rem;&>div{flex-basis:24%}& p{font-weight:500}}#step-cards{& .step-cards-container{flex-direction:row}}#why{& h2{margin-bottom:4rem;font-size:48px}&>div{flex-direction:row;& .why-four-points{&>div{flex-basis:50%}}}}#what-do{& h2{margin-bottom:2rem;font-size:48px}&>div{column-count:2}}#faqs{padding:2rem;& h2{margin-bottom:4rem;font-size:48px}& .accordion{padding:1rem 2rem}}#related{flex-direction:row}#statistics{&>div{flex-direction:row}}}@media (width>=1200px){#hero{padding:64px}#what-do{&>div{column-count:3}}.breadcrumb{font-size:14px}}