#hero{text-align:center;position:relative;& .right-side,& .left-side{display:none}& .title-container{max-width:max-content;margin-inline:auto;position:relative;& h1{z-index:1;margin-top:5rem;font-size:36px;font-weight:600;position:relative}& svg{z-index:0;width:120px;height:65px;position:absolute;bottom:-1.2rem;left:2rem}&+p{margin-top:1rem;font-size:22px;font-weight:600}}& .service-input-container{border:1px solid var(--black-color);border-radius:160px;gap:.5rem;width:100%;padding:.4rem;display:flex;overflow:hidden;& input{border:none;border-radius:160px;outline:none;flex-shrink:1;width:100%;padding-inline:1rem;display:block}& button{flex-basis:240px;padding:10px 24px;& span{display:none}}}}.service-input-wrapper{margin-top:2.4rem;max-width:40rem;margin-inline:auto;position:relative;& #service-search-results{width:100%;position:absolute;top:75px;& ul{border-radius:var(--radius);text-align:left;background:#fff;border:1px solid #e5e7eb;padding:.5rem;list-style:none;overflow:hidden;& li a{color:var(--black-color);border-radius:var(--radius);padding:.5rem;display:block;&:hover{background:var(--primary-color-light)}}}}}#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}}&>button{margin-inline:auto;white-space:nowrap;margin-top:2rem;font-size:14px;& svg{max-width:initial}}}#popular-services{& h3{margin-bottom:1rem;font-size:28px;font-weight:600}& .popular-cards{flex-wrap:wrap;gap:2rem 1rem;display:flex;&>a{flex-basis:100%;height:100%;display:block;& img{object-fit:cover;border-radius:var(--radius);width:100%;height:11rem;min-height:11rem;margin-bottom:.5rem;display:block}& p{color:var(--black-color);font-size:20px;font-weight:500}}}}#all-services{& h3{margin-bottom:2rem;font-size:28px;font-weight:600}& .service-category{margin-bottom:2rem;& h4{color:var(--primary-color);margin-bottom:1.5rem;font-size:22px;font-weight:600}& .sub-services{flex-wrap:wrap;gap:2rem 1rem;display:flex;& a{color:#1b54fe;border:1px solid #1b54fe;border-radius:6px;padding:10px 16px;font-size:14px;font-weight:500}}}}@media (width>=768px){#hero{& .title-container{& h1{font-size:60px}& svg{z-index:0;width:340px;position:absolute;bottom:-.5rem;left:-3rem}&+p{font-size:26px}}& .service-input-container{& button{flex-basis:240px;padding:16px 24px;& span{display:inline}}}}#step-cards{& .step-cards-container{flex-direction:row}&>button{font-size:16px}}#popular-services{& h3{font-size:38px}& .popular-cards{&>a{flex-basis:48.9%;& p{color:var(--black-color);font-size:20px;font-weight:500}}}}#all-services{& h3{font-size:38px}& .service-category{& h4{font-size:28px}& .sub-services{& a{font-size:18px}}}}}@media (width>=1200px){#popular-services{& .popular-cards{&>a{flex-basis:23.9%}}}}@media (width>=1280px){#hero{& .right-side,& .left-side{display:block;position:absolute;top:60%;transform:translateY(-100%);& .float-card{border:1px solid var(--primary-color);border-radius:var(--radius);gap:1rem;width:100%;min-width:17rem;padding:.5rem .6rem;display:flex;position:absolute;top:calc(100% + 2rem);& .img-container{border-radius:var(--radius);background-color:#405ff24d;padding:0 .4rem;& img{width:67px;height:100%;margin:auto;display:block}}&>div:last-child{text-align:left;&>p:first-child{color:#565656;margin-bottom:.2rem;font-weight:600;&+p{margin-bottom:.5rem}}&>div{align-items:center;gap:.5rem;display:flex;&>div{color:var(--primary-color);align-items:center;gap:.2rem;display:flex}& button{background:var(--primary-color);color:#fff;border:none;border-radius:160px;padding:.2rem .5rem;font-size:14px}}}}}& .right-side{right:6rem;& .float-card{left:5rem}}& .left-side{top:50%;left:8rem;& .float-card{right:5rem}}}}