.routine-step-carousel{column-gap:10px}.routine-carousel-arrow-left svg{width:25px;transform:rotate(90deg);cursor:pointer;opacity:.6;padding-bottom:10px}.routine-carousel-arrow-right svg{width:25px;transform:rotate(270deg);cursor:pointer;opacity:.6;padding-bottom:10px}.routine-carousel-arrow-left svg:hover,.routine-carousel-arrow-right svg:hover{opacity:1}.product-step-wrap{border-bottom:10px solid #00000070;border-radius:10px 10px 0 0;margin:0 5px;padding:20px 0 0;width:33%;max-width:225px;background:transparent;transition:background-color .5s ease,transform .4s ease,border-color .5s ease}.product-step-wrap.active{border-bottom:10px solid #000000;border-radius:10px 10px 0 0;background:#fff}.step-count{font-weight:500;text-transform:uppercase;background:#000;color:#fff;padding:5px 10px;margin-bottom:0;border-radius:30px}.product-step-wrap img{max-width:225px;width:100%}.routine-step-content{height:-webkit-fill-available;margin:20px auto}.step-content-wrap{width:90%;background:#fff;padding:20px;border-radius:10px;height:100%;justify-content:center;align-items:center;display:none;opacity:0;transform:scale(.98);transition:opacity .4s ease,transform .4s ease}.step-content-wrap.active{display:flex!important;opacity:1;transform:scale(1)}.step-title{font-size:20px;font-weight:500;max-width:90%;margin-top:10px;text-align:center}@media screen and (max-width:750px){.product-step-wrap{padding:10px 0 0}.step-title{font-size:16px}.step-count{font-size:11px}}.step-content-inner{width:100%;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}.step-content-wrap.active .step-content-inner{opacity:1;transform:translateY(0)}.routine-step-cta-button{margin-top:45px;display:inline-flex;align-items:center;justify-content:center;background-color:#fff;color:#000;font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;text-decoration:none;padding:16px 20px;border-radius:50px;border:none;cursor:pointer;box-shadow:0 8px 16px #00000063;transition:transform .2s ease,box-shadow .2s ease}.routine-step-cta-button:hover{transform:translateY(-2px);box-shadow:0 8px 16px #00000063;background:#000;color:#fff}@media screen and (max-width:750px){.routine-step-cta-button{margin-top:20px}.routine-step-content{height:auto;margin:20px auto}.real-skin-title-list li{letter-spacing:0}}
/*# sourceMappingURL=/cdn/shop/t/144/assets/component-routine-step-carousel.css.map */