.how-to-section{width:90%;margin:0 auto;height:fit-content;background-color:#ffffff80;border-radius:5px}.how-to-background{overflow:hidden;transition:height .4s ease}.how-to-content-ctn{overflow:hidden;transition:max-height .4s ease}.how-to-header{position:relative;border-radius:5px;overflow:hidden;min-height:52px;margin-bottom:12px;border:1px solid lightgray;.how-to-background{background-image:url(/_astro/howto-title.Le1cHdxf.png);width:100%;height:200px;background-repeat:no-repeat;background-position:10% 15%;background-size:cover}.how-to.visible{max-height:150px}.how-to-ctn{position:absolute;top:0;left:0;display:flex;gap:20px;align-items:center;background-color:#fffffff2;border-top-left-radius:5px;border-top-right-radius:5px;width:100%;padding:5px 0;.title-line{width:100%;padding:5px 8px;.open-close{transform:rotate(-90deg)}}:hover{cursor:pointer}.how-to-line{padding:0}}}.underline{height:1px;width:0%;background-color:var(--dark-blue);transition:width .2s ease-in-out}.how-to-links{color:var(--dark-blue);text-decoration:none;&:hover{cursor:pointer}}.card-ctn{display:none;opacity:0;transform:translate(0);transition:transform .2s ease,opacity .2s ease}.card-ctn.active{z-index:10;display:block;opacity:1}.card-ctn.slide-out{transform:translate(-100%);opacity:0}.how-to-content-ctn{color:var(--dark-gray);height:fit-content;display:flex;justify-content:center;gap:50px;flex-direction:row;padding:10px;border:1px solid lightgray;border-radius:5px;.cards-section{position:relative;width:100%;display:flex;flex-direction:column;overflow:visible;justify-content:space-between;align-items:center;gap:30px;.how-to-intro{text-align:center;padding-top:12px}.card-placeholder{height:550px;width:100%;max-width:600px;border-radius:5px;position:relative;.card-ctn{border:1px solid lightgray;position:absolute;height:550px;width:100%;max-width:600px;background-color:#ffffffe6;border-radius:5px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;margin-bottom:20px;padding:40px;.card-content{display:flex;flex-direction:column;gap:20px;.title-line{display:flex;align-items:center;gap:20px;padding:0!important;.icon-ctn{width:70px;height:70px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;.number-icon{width:50px;height:50px;aspect-ratio:1 / 1;display:flex;align-items:center;justify-content:center;border-radius:50%;background-color:var(--light-blue);font-size:1.3rem;color:#fff}}.title{width:100%;text-decoration:underline;text-decoration-color:var(--dark-blue)}}.todo-line{display:flex;gap:20px;.icon-ctn{width:70px;height:70px;aspect-ratio:1 / 1;display:flex;align-items:start;justify-content:center;.icon{width:auto;height:35px}}}.why-line{display:flex;gap:20px;.icon-ctn{width:70px;height:70px;aspect-ratio:1 / 1;display:flex;align-items:start;justify-content:center;& img{width:35px;height:35px}}}}}}.how-to-outro{text-align:center;padding-bottom:12px}}.youtube-section{width:30%;min-width:250px;border-left:1px solid white;padding:0 20px;.youtube-intro{width:100%}}}.progress-line{display:flex;align-items:center;position:relative;height:40px;padding-top:30px;border-top:1px solid white;.progress-bar{display:flex;gap:8px;align-items:center;justify-content:center;position:absolute;left:0;right:0;.dot{width:12px;height:12px;aspect-ratio:1 / 1;border-radius:50%}.dot.light-blue{background-color:var(--light-blue)}.dot.dark-blue{background-color:var(--dark-blue)}}.link{width:fit-content;position:absolute;right:0;.next-btn{text-decoration:none;color:var(--dark-blue);padding-bottom:5px;overflow:hidden;display:block;position:relative;&:hover{cursor:pointer}&:hover+.underline{width:100%}}}.underline{height:1px;width:0%;background-color:var(--dark-blue);transition:width .2s ease-in-out}}.open-close{transition:transform .4s ease}@media (max-width: 900px){.how-to-content{flex-direction:column;gap:20px;.cards-section{width:100%}.youtube-section{width:100%;border-left:none;border-top:1px solid white;padding:20px 0 0;.youtube-intro{text-align:center}}}}@media (max-width: 630px){.how-to-intro,.how-to-outro,.youtube-intro{text-align:left!important}}@media (max-width: 500px){.card-ctn{padding:20px!important;.title-line{gap:10px!important;.icon-ctn{width:30px!important;height:30px!important;aspect-ratio:1 / 1!important;& img{width:30px!important;height:30px!important;aspect-ratio:1 / 1!important}}.number-icon{width:30px!important;height:30px!important;aspect-ratio:1 / 1}}.todo-line,.why-line{gap:10px!important;.icon-ctn{width:30px!important;height:45px!important;aspect-ratio:1 / 1!important;& img{width:30px!important;height:30px!important;aspect-ratio:1 / 1!important}}}}}@media (max-width: 700px){.how-to-background{max-height:150px}.how-to-background.visible{max-height:120px}}.community-section{width:100%;margin:0 auto;height:fit-content;background-color:#ffffff80;border-radius:5px}.community-background{overflow:hidden;transition:height .4s ease}.community-content-ctn{overflow:hidden;transition:max-height .4s ease;color:var(--dark-gray);height:fit-content;display:flex;justify-content:center;gap:32px;flex-direction:column;padding:10px;border:1px solid lightgrey;border-radius:5px;.community-main{display:flex;flex-direction:column;gap:12px;.social-media-line{display:flex;gap:18px;align-items:center;.icon{width:24px;height:24px;aspect-ratio:1 / 1}}}.social-links{display:flex;gap:18px;.icon{width:48px;height:48px;aspect-ratio:1 / 1}}}.community-header{position:relative;border-radius:5px;overflow:hidden;min-height:52px;margin-bottom:12px;border:1px solid lightgray;.community-background{background-image:url(/_astro/community-title.BsLwhrUn.png);width:100%;height:200px;background-repeat:no-repeat;background-position:10% 15%;background-size:cover}.community-header.visible{max-height:150px}.community-ctn{position:absolute;top:0;left:0;display:flex;gap:20px;align-items:center;background-color:#fffffff2;border-top-left-radius:5px;border-top-right-radius:5px;width:100%;padding:5px 0;:hover{cursor:pointer}.title-line{padding:5px 8px;display:flex;align-items:center;width:100%;.title-icon{width:30px;height:30px;aspect-ratio:1 / 1;display:flex;justify-content:start;align-items:center;.icon{height:24px;width:auto}}.title{width:100%}.open-close{width:.7rem;height:.7rem;aspect-ratio:1 / 1;display:flex;justify-content:end;align-items:center;rotate:-90deg;transition:all .2s ease-in-out;.icon{height:.7rem;width:auto}}&:hover{cursor:pointer}}}}.community-links{color:var(--dark-blue);text-decoration:none;&:hover{cursor:pointer}}.open-close-icon{transition:transform .4s ease}@media (max-width: 630px){.community-intro,.community-outro{text-align:left!important}}@media (max-width: 700px){.community-background{max-height:150px}.community-background.visible{max-height:120px}}