.tutorial-page{font-family:var(--font-changa);color:#333;background-color:var(--background);width:100%;min-height:100vh;position:relative;overflow-x:hidden}.steps-header-container{text-align:center;z-index:1;background-color:#3e7793;padding:2rem 1rem;position:relative}.steps-header-container h1{color:#fff;font-size:1.8rem;font-weight:700;font-family:var(--font-chakra-petch);margin-bottom:1rem;line-height:1.2}.steps-header-container .subtitle{color:#ffffffd9;max-width:800px;margin:0 auto;font-size:1rem;line-height:1.5}.tutorial-steps-container{max-width:1200px;margin:0 auto;padding:2rem 1rem}.tutorial-step-item{flex-direction:column;align-items:center;gap:1.5rem;max-width:100%;margin-bottom:3rem;margin-left:auto;margin-right:auto;display:flex}.tutorial-step-content{text-align:center;background-color:#fff;border-radius:12px;flex:1;order:2;width:100%;max-width:100%;padding:1.5rem;position:relative;box-shadow:0 2px 12px #00000014}.step-number-badge{color:#fff;text-transform:uppercase;letter-spacing:.5px;background-color:#3e7793;border-radius:50px;margin-bottom:1rem;padding:.4rem 1rem;font-size:.75rem;font-weight:600;display:inline-block}.tutorial-step-content h2{color:#3e7793;font-size:1.3rem;font-family:var(--font-chakra-petch);margin-bottom:.75rem;font-weight:700;line-height:1.3}.tutorial-step-content p{color:#666;margin:0;font-size:.95rem;line-height:1.5}.tutorial-step-image{flex:1;order:1;justify-content:center;width:100%;max-width:280px;display:flex}.tutorial-step-image img{border-radius:16px;width:100%;max-width:100%;height:auto;transition:transform .3s;box-shadow:0 8px 24px #0000001f}.tutorial-step-image img:hover{transform:scale(1.02)}@media (min-width:768px){.steps-header-container{padding:2.5rem 1.5rem}.steps-header-container h1{font-size:2.5rem}.steps-header-container .subtitle{font-size:1.2rem}.tutorial-steps-container{padding:3rem 1.5rem}.tutorial-step-item{flex-direction:row;gap:2rem;margin-bottom:4rem}.tutorial-step-item:nth-child(2n){flex-direction:row-reverse}.tutorial-step-content{text-align:left;order:unset;max-width:45%;padding:2rem}.tutorial-step-content h2{font-size:1.6rem}.tutorial-step-image{order:unset;max-width:320px}.step-number-badge{padding:.5rem 1.2rem;font-size:.8rem}}@media (min-width:1024px){.steps-header-container{padding:3rem 2rem}.steps-header-container h1{font-size:3rem}.steps-header-container .subtitle{font-size:1.4rem}.tutorial-steps-container{padding:4rem 2rem}.tutorial-step-item{gap:3rem;max-width:1000px;margin-bottom:5rem}.tutorial-step-content{max-width:420px;padding:2.5rem}.tutorial-step-content h2{font-size:1.8rem}.tutorial-step-image{max-width:360px}.tutorial-step-image img{border-radius:20px}}@media (min-width:1280px){.tutorial-step-image{max-width:400px}.tutorial-step-content{max-width:450px}}