@import"https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap";*{box-sizing:border-box;font-family:Ubuntu,sans-serif}:root{--color-primary-blue-950: hsl(213, 96%, 18%);--color-primary-purple-600: hsl(243, 100%, 62%);--color-primary-blue-300: hsl(228, 100%, 84%);--color-primary-blue-200: hsl(206, 94%, 87%);--color-primary-red-500: hsl(354, 84%, 57%);--color-neutral-grey-500: hsl(231, 11%, 63%);--color-neutral-purple-200: hsl(229, 24%, 87%);--color-neutral-blue-100: hsl(218, 100%, 97%);--color-neutral-blue-50: hsl(231, 100%, 99%);--color-neutral-white: hsl(0, 100%, 100%)}.Bar-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0;border-radius:15px}.steps{position:relative;padding:8% 3%;z-index:1;display:flex;flex-direction:column}.Step-container{display:flex;align-items:center;gap:24px;margin:24px}.icon{width:40px;height:40px;border-radius:50%;border:1px solid var(--color-neutral-blue-50);display:flex;align-items:center;justify-content:center;color:var(--color-neutral-blue-50)}.icon.active{border-color:var(--color-primary-blue-300);color:var(--color-primary-blue-950);background-color:var(--color-primary-blue-300);font-weight:700}.Step-container .text{display:flex;flex-direction:column;gap:5px}.Step-container .text .header{margin:0;color:var(--color-neutral-grey-500)}.Step-container .text .description{margin:0;font-weight:700;color:var(--color-neutral-blue-50)}@media (max-width: 800px){.steps{flex-direction:row;gap:0;align-items:center;justify-content:center}.Step-container{margin:10px}.Step-container .text{display:none}.Bar-image{border-radius:0}}.Form .title{color:var(--color-primary-blue-950);margin:4px 0}.Form .description{color:var(--color-neutral-grey-500)}.buttons{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;margin:32px 12px}.nextButton{border:none;background-color:var(--color-primary-blue-950);color:var(--color-neutral-white);padding:12px 32px;border-radius:10px;font-size:16px;cursor:pointer}.nextButton.confirm{background-color:var(--color-primary-purple-600)}.nextButton.confirm:hover{opacity:.6}.nextButton:hover{opacity:.8}.backButton{font-size:16px;font-weight:500;color:var(--color-neutral-grey-500);background:none;outline:none;border:none;cursor:pointer}.backButton:hover{color:var(--color-primary-blue-950)}.inputs{display:flex;flex-direction:column;gap:32px}.input-container{display:flex;flex-direction:column;gap:15px}.top{display:flex;align-items:center;justify-content:space-between}.top label,.top .input-error{margin:0}.top label{color:var(--color-primary-blue-950)}.input-error{color:var(--color-primary-red-500)}.input{outline:none;border:none;border-radius:5px;border:1px solid var(--color-primary-blue-300);color:var(--color-primary-blue-950);padding:16px 24px;font-weight:700;font-size:16px}.input::placeholder{font-weight:400}.input:focus{border-color:var(--color-primary-blue-950)}input.error{border-color:var(--color-primary-red-500)}.plans{display:flex;flex-direction:column;align-items:center;gap:24px;margin:48px 0}.cards{display:flex;align-items:center;width:100%;gap:24px}.plan-card{border:1px solid var(--color-neutral-grey-500);flex-grow:1;padding:16px;border-radius:10px;cursor:pointer;max-width:254px}.plan-card.active{background-color:var(--color-neutral-blue-100)}.plan-card.active,.plan-card:hover{border-color:var(--color-primary-purple-600)}.plan-icon{margin-bottom:64px}.plan-title{color:var(--color-primary-blue-950);font-weight:700;margin:0}.plan-price{color:var(--color-neutral-grey-500);font-size:16px}.discount{color:var(--color-primary-blue-950);font-size:16px;height:20px}.toggle-div{width:100%;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-blue-50);gap:10px;padding:10px 0}.duration{color:var(--color-neutral-grey-500);margin:5px 0;font-weight:500}.duration.active{color:var(--color-primary-blue-950)}.toggle-container{width:64px;height:32px;background-color:var(--color-primary-blue-950);border-radius:50px;position:relative;padding:4px;cursor:pointer}.toggle-container .thumbnail{position:absolute;top:4px;left:4px;height:24px;width:24px;background-color:var(--color-neutral-white);border-radius:50%;transition:transform .3s ease}.toggle-container.active .thumbnail{transform:translate(32px)}.add-ons{display:flex;flex-direction:column;gap:25px}.add-on{display:flex;align-items:center;justify-content:space-between;padding:20px;border:1px solid var(--color-neutral-grey-500);border-radius:10px;cursor:pointer}.add-on:hover{border-color:var(--color-primary-purple-600)}.add-on.active{border-color:var(--color-primary-purple-600);background-color:var(--color-neutral-blue-100)}.add-on .left{display:flex;align-items:center;gap:25px}.checkbox{height:24px;width:24px;border:1px solid var(--color-neutral-grey-500);border-radius:5px;display:flex;align-items:center;justify-content:center}.checkbox.active{background-color:var(--color-primary-purple-600)}.add-on .content{display:flex;flex-direction:column;gap:5px}.add-on .title{margin:0;font-weight:700}.add-on .description{margin:0}.add-on .price{color:var(--color-primary-purple-600)}.summary{width:100%;display:flex;flex-direction:column;max-width:720px}.input-summary{width:100%;margin:32px 0;padding:24px;border-radius:15px;background-color:var(--color-neutral-blue-50)}.plan-summary{display:flex;align-items:center;justify-content:space-between;padding:15px;border-bottom:1px solid var(--color-neutral-grey-500)}.plan-summary .text{display:flex;flex-direction:column;gap:5px}.plan-summary .text p{margin:0;font-weight:500;color:var(--color-primary-blue-950)}.plan-summary .text .change-plan{padding:0;border:none;background:none;color:var(--color-neutral-grey-500);text-decoration:underline;font-size:18px;width:fit-content;cursor:pointer;text-decoration-thickness:2px}.plan-summary .text .change-plan:hover{color:var(--color-primary-purple-600)}.plan-summary .price{color:var(--color-primary-blue-950);font-weight:700}.add-ons-summary{padding:10px;display:flex;flex-direction:column;gap:15px}.add-on-summary{display:flex;align-items:center;justify-content:space-between}.add-on-summary .title,.total-summary .text{color:var(--color-neutral-grey-500)}.add-on-summary .price{color:var(--color-primary-blue-950);margin:10px 0}.total-summary{padding:0 35px;display:flex;align-items:center;justify-content:space-between}.total-summary .total{color:var(--color-primary-purple-600);font-weight:700;font-size:24px;margin:0}@media (max-width: 800px){.cards{flex-direction:column}.plan-card{width:100%;max-width:none;display:flex;gap:15px}.plan-icon{margin:0}.plan-card .content{display:flex;flex-direction:column}.plan-title,.plan-price,.discount{margin:2px 0}.add-on{padding:20px 5px}.add-on .left{gap:15px}.buttons{margin-top:25px}.input-summary{padding:24px 0}.total-summary{padding:0 10px}}.ThankYou h1{color:var(--color-primary-blue-950)}.ThankYou p{color:var(--color-neutral-grey-500);text-align:center}body{margin:0}.App{padding:16px;height:100vh;background-color:var(--color-primary-blue-200);display:flex}.Bar{flex:1;display:flex;position:relative;flex-direction:column;min-width:300px}.Form,.ThankYou{background-color:var(--color-neutral-white);flex:3;display:flex;flex-direction:column;border-radius:10px}.Form{padding:48px 24px 48px 128px}.ThankYou{align-items:center;justify-content:center}@media (max-width: 1100px){.Form{padding-left:12px}}@media (max-width: 800px){.App{position:relative;flex-direction:column;padding:0}.Bar{align-items:center;justify-content:center;flex:none;height:33%}.Form,.ThankYou{width:90%;position:absolute;top:224px;left:50%;transform:translate(-50%);z-index:1}.ThankYou{padding:112px 24px}.Form{padding-left:32px}}@media (max-width: 500px){.ThankYou{width:100%;padding:112px 10px}.Form{width:100%;padding:48px 10px}}