.how-to-container .subtitle{display:flex;align-items:center;justify-content:center;margin-top:var(--spacing-medium);color:var(--color);font-size:var(--font-size-medium);text-align:center}.how-to-container .how-to-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:50px}.how-to-container .how-to-content .step-container{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:80px;padding:0 80px}.how-to-container .how-to-content .step-container .step-bar{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:row;align-items:center;width:100%;height:5px;background-color:rgba(88,28,135,.6);z-index:-1}.how-to-container .how-to-content .step-container .step-bar .progress{width:80px;min-width:80px;height:100%;background-image:linear-gradient(to right, #a855f7, #6366f1);transition:all .5s cubic-bezier(0.4, 0, 0.2, 1)}.how-to-container .how-to-content .step-container .step-item{position:relative;width:80px;height:80px;background-color:#581c87;border-radius:999px;transition:all .2s ease;cursor:pointer}.how-to-container .how-to-content .step-container .step-item[s-active]{background-image:linear-gradient(to bottom right, #a855f7, #4f46e5)}.how-to-container .how-to-content .step-container .step-item:hover{scale:1.08}.how-to-container .how-to-content .step-container .step-item::after{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);content:"";width:30px;height:30px;color:#fff;font-size:25px;background-image:var(--step-icon);background-size:25px;background-repeat:no-repeat;background-position:center}.how-to-container .how-to-content .step-container .step-item[done]::after{content:"" !important;width:30px !important;height:30px !important;background-image:url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMjAgNiA5IDE3bC01LTUiPjwvcGF0aD48L3N2Zz4=) !important;background-size:30px !important}.how-to-container .how-to-content .scroll-btn{position:absolute;top:25%;transform:translateY(-50%);display:none;align-items:center;justify-content:center;width:40px;height:40px;color:#fff;background-color:rgba(150,150,150,.3);backdrop-filter:blur(20px);border-radius:999px}.how-to-container .how-to-content .scroll-btn svg{width:25px;height:25px}.how-to-container .how-to-content .scroll-btn:active{scale:.98}.how-to-container .how-to-content .scroll-btn.left{left:-10px}.how-to-container .how-to-content .scroll-btn.right{right:-10px}.how-to-container .how-to-content .step-tab{display:none;max-width:900px;width:100%;height:400px;border-radius:var(--border-radius-xsmall);background-color:#fff;overflow:hidden}.how-to-container .how-to-content .step-tab[s-active]{display:block}.how-to-container .how-to-content .step-tab .step-tab-box{display:flex;flex-direction:row;padding:30px;width:100%;height:100%;background-image:linear-gradient(to bottom right, rgba(88, 28, 135, 0.9), rgba(49, 46, 129, 0.9))}.how-to-container .how-to-content .step-tab .step-tab-box .image{height:100%;aspect-ratio:1/1;background-color:#e7e7e7;border-radius:var(--border-radius-small)}.how-to-container .how-to-content .step-tab .step-tab-box .image img{width:100%;height:100%;border-radius:var(--border-radius-small);object-fit:contain}.how-to-container .how-to-content .step-tab .step-tab-box .text{display:flex;flex-direction:column;justify-content:space-between;gap:10px;margin-left:30px;width:100%;color:#fff}.how-to-container .how-to-content .step-tab .step-tab-box .text .title{margin:0;font-size:var(--font-size-xmedium);font-weight:bold}.how-to-container .how-to-content .step-tab .step-tab-box .text .desc{margin:0;font-size:var(--font-size-regular);color:#e9d5ff}.how-to-container .how-to-content .step-tab .step-tab-box .text .header{display:flex;flex-direction:column;justify-content:center;flex:1}.how-to-container .how-to-content .step-tab .step-tab-box .text .footer{display:flex;flex-direction:row;justify-content:space-between}.how-to-container .how-to-content .step-tab .step-tab-box .text .footer .button{padding:5px 15px;border-radius:999px}@media(max-width: 600px){.how-to-container .how-to-content{flex-direction:row;align-items:normal}.how-to-container .how-to-content .scroll-container{display:flex;flex-direction:row;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth}.how-to-container .how-to-content .step-container{display:none}.how-to-container .how-to-content .scroll-btn{display:flex}.how-to-container .how-to-content .step-tab{display:block;height:auto;flex-shrink:0;scroll-snap-align:start}.how-to-container .how-to-content .step-tab .text{flex:1}.how-to-container .how-to-content .step-tab .text .header.header.header{justify-content:start}.how-to-container .how-to-content .step-tab .text .header.header.header .title{display:flex;flex-direction:column;align-items:center;gap:5px}.how-to-container .how-to-content .step-tab .text .header.header.header .title::before{display:block;padding:0 10px;border-radius:999px;background-image:linear-gradient(to bottom right, #a855f7, #4f46e5);font-size:var(--font-size-xxsmall);font-weight:normal}.how-to-container .how-to-content .step-tab:nth-child(1) .text .title::before{content:"Step 1"}.how-to-container .how-to-content .step-tab:nth-child(2) .text .title::before{content:"Step 2"}.how-to-container .how-to-content .step-tab:nth-child(3) .text .title::before{content:"Step 3"}.how-to-container .how-to-content .step-tab:nth-child(4) .text .title::before{content:"Step 4"}.how-to-container .how-to-content .step-tab:nth-child(5) .text .title::before{content:"Step 5"}.how-to-container .how-to-content .step-tab:nth-child(6) .text .title::before{content:"Step 6"}.how-to-container .how-to-content .step-tab .step-tab-box{padding:10px;flex-direction:column}.how-to-container .how-to-content .step-tab .step-tab-box .image{width:100%;height:auto}.how-to-container .how-to-content .step-tab .step-tab-box .text{margin-left:0;margin-top:10px;text-align:center}.how-to-container .how-to-content .step-tab .step-tab-box .text .title{font-size:var(--font-size-xregular)}.how-to-container .how-to-content .step-tab .step-tab-box .text .desc{font-size:var(--font-size-xxsmall)}.how-to-container .how-to-content .step-tab .step-tab-box .text .footer{display:none}}