@font-face{font-family:"Ubuntu";src:url(assets/fec2d0f1431a6114a6ce.ttf);src:url(assets/e37c5546eb1a6efc4818.ttf);src:url(assets/1cbb1b79a23478cc89ad.ttf)}*{padding:0;margin:0;box-sizing:border-box}body{display:flex;flex-direction:column;align-items:center;justify-content:center;background-color:#d6d9e6;height:100vh}.content{display:grid;grid-template-columns:minmax(250px, 25%) auto;margin:auto;max-width:800px;width:80%;padding:10px 10px 10px 20px;background-color:#fff;font-family:"Ubuntu";border-radius:10px;height:82vh}.side-bar::before{content:"";background:url(assets/6918153f38678372ceb1.svg);position:absolute;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;top:0;right:10px;z-index:-1}.side-bar{display:flex;flex-direction:column;gap:25px;padding:40px 20px;border-radius:5px;position:relative;z-index:2}.side-bar .bar-step{display:flex;gap:15px;align-items:center;text-transform:uppercase;color:#fff}.side-bar .bar-step h3{font-size:15px;line-height:25px;letter-spacing:2px;opacity:.9}.side-bar .bar-step .step{color:hsl(228,100%,84%)}.side-bar .number{border:1px solid #f0f6ff;border-radius:50%;width:40px;height:40px;font-weight:600;display:flex;align-items:center;justify-content:center}.number.active{background-color:hsl(206,94%,87%);color:hsl(213,96%,18%)}.personal-info,.select-plan,.pick-add-ons,.finish,.end{padding:40px;max-width:95%;position:relative;height:100%}.personal-info .section-header,.select-plan .section-header,.pick-add-ons .section-header,.finish .section-header,.end .section-header{margin-bottom:30px}.personal-info .section-header p,.select-plan .section-header p,.pick-add-ons .section-header p,.finish .section-header p,.end .section-header p{margin-top:10px}.personal-info h1,.select-plan h1,.pick-add-ons h1,.finish h1,.end h1{color:hsl(213,96%,18%)}.personal-info p,.select-plan p,.pick-add-ons p,.finish p,.end p{font-size:14px;color:hsl(231,11%,63%);opacity:.7}.change-step{display:flex;position:absolute;bottom:25px;width:calc(100% - 80px);display:flex;align-items:center;justify-content:space-between}.next-step{background-color:hsl(213,96%,18%);position:absolute;right:0;color:#fff;padding:10px 25px;border:none;cursor:pointer;border-radius:8px}.next-step:hover{background-color:#144777}.back-step{color:hsl(231,11%,63%);font-weight:700;border:none;background-color:rgba(0,0,0,0);cursor:pointer}.back-step:hover{color:hsl(213,96%,18%)}.hidden{display:none !important}
#form>div{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;color:hsl(213,96%,18%)}#form>div input{padding:10px;color:hsl(213,96%,18%);font-weight:600;outline:none;border:1px solid #d6d9e6;border-radius:5px}#form>div input:focus{border:1px solid hsl(243,100%,62%)}#form>div input:invalid+.error-span{display:block}#form>div .invalid{border:1px solid hsl(354,84%,57%)}.input-field{position:relative}.error-span{position:absolute;right:0;font-size:14px;color:hsl(354,84%,57%)}
.choose-plan{background-color:#fafbff;padding:15px 25px;border-radius:10px}.plan-type{display:flex;gap:15px;justify-content:space-between;color:hsl(213,96%,18%);font-weight:600;position:relative;border-bottom:1px solid #d6d9e6}.plan-type .plan-features{margin-bottom:25px}.plan-type .plan-features h3{margin-bottom:10px;color:hsl(213,96%,18%)}.plan-type .plan-features .change-plan{color:hsl(231,11%,63%);font-weight:normal;text-decoration:underline;cursor:pointer}.plan-type .plan-features .change-plan:hover{font-weight:600;color:hsl(243,100%,62%)}.plan-type .plan-price{margin-top:20px}.choose-ons{display:flex;justify-content:space-between;margin:15px 0 15px}.choose-ons .choose-ons-price{color:hsl(213,96%,18%)}.total{display:flex;justify-content:space-between;padding:25px}.total .total-per-period{font-weight:600;color:hsl(243,100%,62%)}#confirm-btn{background-color:hsl(243,100%,62%);color:#fff;padding:10px 25px;border:none;cursor:pointer;border-radius:8px}#confirm-btn:hover{opacity:.8}
.plans{display:flex;flex-direction:column}.plans-categories{display:flex;gap:15px}.plans-categories .plan-category{height:175px;width:140px;font-size:15px;border:1px solid #d6d9e6;padding:15px;border-radius:10px}.plans-categories .plan-category:hover{border-color:hsl(243,100%,62%)}.plans-categories .plan-category div{display:flex;flex-direction:column;gap:25px}.plans-categories .plan-category div .plan-descrition{gap:5px}.plans-categories .plan-category div .plan-descrition h3{color:hsl(213,96%,18%)}.plans-categories .plan-category div .plan-descrition span{color:hsl(231,11%,63%)}.plans-categories .plan-category div .plan-descrition .months-free{color:hsl(213,96%,18%)}.plans-categories .plan-category div img{width:35px;height:35px}.plans-categories .active{background-color:#f0f6ff;border:1px solid hsl(243,100%,62%)}.plan-period{display:flex;padding:10px;gap:30px;justify-content:center;background-color:#fafbff;margin-top:30px;color:hsl(231,11%,63%);font-weight:600}.plan-period span.active{color:hsl(213,96%,18%)}.btn-box{background-color:hsl(213,96%,18%);width:40px;height:22px;position:relative;border-radius:25px;padding:5px;cursor:pointer}.btn-box .btn-change-plan{position:absolute;bottom:3px;width:15px;height:15px;border-radius:50%;background-color:#f7f7f7;transition:all .2s}.btn-box .btn-change-plan.btn-change-plan.yearly{right:5px}
.pick-add-ons{display:block}.add-on{display:flex;justify-content:space-between;gap:20px;list-style:none;border:1px solid hsl(231,11%,63%);border-radius:10px;margin-top:10px;padding:20px}.add-on .on{display:flex;gap:20px;cursor:pointer}.add-on .on-description h3{color:hsl(213,96%,18%);font-size:16px;margin-bottom:5px}.add-on .on-description span{color:hsl(231,11%,63%)}.add-on .on-price p{font-weight:600;color:hsl(243,100%,62%)}.add-on .wrapper{width:20px;height:20px;position:relative}.add-on .wrapper .checkbox{opacity:0;cursor:pointer;width:0;height:0}.add-on .check-btn{border:1px solid hsl(231,11%,63%);border-radius:2px;position:absolute;left:0;top:0;right:0;bottom:0;text-align:center}.add-on .check-btn i{padding:2px;font-size:15px;color:#fff}.add-on .check-btn::before{content:"";position:absolute;width:100%;height:100%}.add-on .wrapper input:checked+.check-btn{color:#fff;border:none;background-color:hsl(243,100%,62%)}.add-on.active{background-color:#f0f6ff;border:1px solid hsl(243,100%,62%)}
.end{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:25px}.end p{text-align:center;font-size:15px;line-height:22px}
@media(max-width: 920px){.content{grid-template-columns:minmax(175px, 20%) auto}.content .side-bar{padding:10px}.content .side-bar .step-info h3{font-size:14px}.select-plan{max-width:500px}.select-plan .plans-categories .plan-category{max-width:100%;width:fit-content}}@media(max-width: 780px){.content{display:flex;flex-direction:column;padding:0 0 20px 0;height:100%;width:100%;background-color:#fff}.content .side-bar::before{content:"";background:url(assets/ad41661b40ca0b967f3a.svg);position:absolute;width:100%;height:100%;background-size:cover;background-repeat:no-repeat;top:0;left:0;z-index:-1}.content .side-bar{height:30%;display:flex;flex-direction:row;justify-content:center}.content .side-bar .bar-step{display:flex;align-items:baseline;margin-top:15px}.content .side-bar .step-info{display:none}.content .container{background-color:#f0f6ff;display:flex;justify-content:center;height:75%;margin-top:-65px}.content .section-step{position:static;width:90%;height:90%;padding:30px;background-color:#fff;border-radius:10px;z-index:999}.content .section-step .section-header{margin-bottom:10px}.content .section-step .step-info{font-size:16px}.content .plans-categories{flex-direction:column}.content .plans-categories .plan-category{display:flex;align-items:center;padding:10px 15px;height:70px;width:100%}.content .plans-categories div{flex-direction:row;gap:15px}.content .plans-categories div img{width:30px;height:30px}.content .plans-categories div .plan-descrition{flex-direction:column;font-size:12px}.content .plan-period{margin-top:15px}.content .on{display:flex;align-items:center;width:100%}.content .check-btn{width:18px}.content .add-on{padding:10px;align-items:center}.content .change-step{left:0;padding:25px;width:100vw;background-color:#fff;height:40px}.content .next-step{right:15px}}@media(max-width: 380px){.container .select-plan{padding:20px;padding-bottom:25px}.container .section-header .step-title{font-size:18px}.container .plans-categories{gap:5px}.container .plan-period{margin:5px}}