.step-tutorial{background:#fff;border-radius:20px;width:100%;max-width:1000px;margin:0 auto;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000014}.step-tutorial .tutorial-container{min-height:500px;display:flex}@media (max-width:768px){.step-tutorial .tutorial-container{flex-direction:column;min-height:auto}}.step-tutorial .tutorial-image-side{background:#f8f9fa;flex:1.2;position:relative;overflow:hidden}@media (max-width:768px){.step-tutorial .tutorial-image-side{flex:none;height:250px}}.step-tutorial .tutorial-image-side .tutorial-image-wrapper{opacity:0;z-index:1;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1),opacity .6s;position:absolute;top:0;left:0;transform:translate(50px)}.step-tutorial .tutorial-image-side .tutorial-image-wrapper.active{opacity:1;z-index:2;transform:translate(0)}.step-tutorial .tutorial-image-side .tutorial-image-wrapper .tutorial-img{object-fit:cover;filter:brightness(.95)}.step-tutorial .tutorial-content-side{background:#fff;flex-direction:column;flex:1;justify-content:center;padding:40px;display:flex}@media (max-width:768px){.step-tutorial .tutorial-content-side{padding:30px 20px}}.step-tutorial .tutorial-content-side .content-wrapper{width:100%;max-width:400px;margin:0 auto}.step-tutorial .tutorial-content-side .step-indicator-dots{gap:8px;margin-bottom:30px;display:flex}.step-tutorial .tutorial-content-side .step-indicator-dots .dot{cursor:pointer;background:#e9ecef;border-radius:50%;width:8px;height:8px;transition:all .3s}.step-tutorial .tutorial-content-side .step-indicator-dots .dot.active{background:#2ecc71;border-radius:10px;width:24px}.step-tutorial .tutorial-content-side .text-content{margin-bottom:40px}.step-tutorial .tutorial-content-side .text-content .tutorial-title{color:#2c3e50;margin-bottom:16px;font-size:2rem;font-weight:700;line-height:1.2}@media (max-width:768px){.step-tutorial .tutorial-content-side .text-content .tutorial-title{font-size:1.5rem}}.step-tutorial .tutorial-content-side .text-content .tutorial-description{color:#5d6d7e;font-size:1.1rem;line-height:1.6}.step-tutorial .tutorial-content-side .tutorial-actions{flex-direction:column;gap:16px;display:flex}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav{gap:12px;display:flex}@media (max-width:480px){.step-tutorial .tutorial-content-side .tutorial-actions .main-nav{flex-direction:column}}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav button{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:14px 24px;font-weight:600;transition:all .2s;display:flex}@media (max-width:480px){.step-tutorial .tutorial-content-side .tutorial-actions .main-nav button{width:100%}}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav .btn-next-step{color:#fff;background:#2ecc71;border:none;flex:1}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav .btn-next-step:hover{background:#27ae60;transform:translateY(-2px)}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav .btn-next-step:active{transform:translateY(0)}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav .btn-prev{color:#5d6d7e;background:#fff;border:2px solid #e9ecef}.step-tutorial .tutorial-content-side .tutorial-actions .main-nav .btn-prev:hover{background:#f8f9fa;border-color:#d5dbdb}.step-tutorial .tutorial-content-side .tutorial-actions .btn-skip{color:#95a5a6;cursor:pointer;background:0 0;border:none;justify-content:center;align-self:center;align-items:center;gap:6px;width:fit-content;padding:10px;font-size:.9rem;font-weight:500;transition:color .2s;display:flex}.step-tutorial .tutorial-content-side .tutorial-actions .btn-skip:hover{color:#7f8c8d;text-decoration:underline}