/* ==========================================
   Account Steps
========================================== */

.account-steps{

    background:var(--clr-bg-light);

}

.account-steps .signup-card{

    transition:var(--transition);

}

.account-steps .signup-card:hover{

    transform:translateY(-8px);

}

.account-steps .signup-card__content{

    padding:var(--space-xl);

}

.account-steps .signup-card__number{

    display:block;

    margin-bottom:var(--space-lg);

    font-size:4.5rem;

    font-weight:800;

    line-height:1;

    color:var(--clr-accent);

    opacity:.45;

}

.account-steps .signup-card h3{

    margin-bottom:var(--space-md);

}

.account-steps .signup-card p{

    color:var(--clr-body);

    line-height:1.8;

}

.account-steps .signup-card__image{

    margin-top:auto;

}

.account-steps .signup-card__image img{

    width:100%;

    height:220px;

    object-fit:cover;

}

.embla{

    overflow:hidden;

    margin-top:var(--space-2xl);

}

.embla__container{

    display:flex;

    gap:var(--space-lg);

    cursor:grab;
     user-select:none;

}

.embla__container:active{

    cursor:grabbing;

}

.embla__slide{

    flex:0 0 32%;

}

.embla__slide .signup-card{

    height:100%;

}

.embla-controls{

    display:flex;

    justify-content:center;

    margin-top:var(--space-xl);

    margin-bottom:var(--space-xl);

}

.embla-progress{

    width:120px;

    height:4px;

    background:rgba(0,0,0,.1);

    border-radius:999px;

    overflow:hidden;

}

.embla-progress__bar{

    width:25%;

    height:100%;

    background:var(--clr-accent);

    border-radius:999px;

    transition:transform .35s ease;

}


.signup__footer {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}


@media(max-width:991px){

    .embla__slide{

        flex:0 0 70%;

    }

}

@media(max-width:768px){

    .embla__slide{

        flex:0 0 92%;

    }

}