/*=========================================================
HOW TO USE
=========================================================*/

.how-to-use{

    padding:100px 0;

    background:var(--white);

}


/*=========================================================
STEP NAVIGATION
=========================================================*/

.steps-navigation{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin:80px 0 70px;

    padding:0 30px;

}


/*=========================================================
PROGRESS LINE
=========================================================*/

.steps-track{

    position:absolute;

    top:28px;

    left:70px;

    right:70px;

    height:2px;

    background:var(--border);

    z-index:1;

}

.steps-progress{

    width:0;

    height:100%;

    background:var(--secondary);

    transition:width .45s ease;

}


/*=========================================================
STEP BUTTON
=========================================================*/

.step-button{

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:16px;

    border:none;

    background:none;

    cursor:pointer;

    transition:.30s ease;

}

.step-button:hover{

    transform:translateY(-4px);

}

.step-number{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--white);

    border:2px solid var(--border);

    color:var(--text);

    font-size:22px;

    font-weight:700;

    transition:.30s ease;

}

.step-button span{

    font-size:14px;

    font-weight:700;

    letter-spacing:.08em;

    color:var(--text);

}

.step-button.active .step-number{

    background:var(--secondary);

    border-color:var(--secondary);

    color:var(--white);

    box-shadow:var(--shadow-md);

}

.step-button.active span{

    color:var(--secondary);

}


/*=========================================================
/*=========================================================
CONTENT PANEL
=========================================================*/

.step-panel{

    display:grid;

    grid-template-columns:42% 58%;

    gap:35px;

    align-items:center;

    background:var(--light);

    border:1px solid var(--border);

    border-radius:22px;

    padding:28px 32px;

}


/*=========================================================
IMAGE
=========================================================*/

.step-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.step-image img{

    width:100%;

    max-width:300px;

    height:auto;

}


/*=========================================================
CONTENT
=========================================================*/

.step-content{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}

.step-badge{

    margin-bottom:24px;

}

.step-content h3{

    margin-bottom:22px;

}

.step-content p{

    margin-bottom:34px;

}


/*=========================================================
BENEFITS
=========================================================*/

.step-benefits{

    display:flex;

    flex-direction:column;

    gap:22px;

    width:100%;

}

.step-benefits li{

    display:flex;

    align-items:flex-start;

    gap:16px;

}

.step-benefits i{

    color:#22C55E;

    margin-top:4px;

    flex-shrink:0;

}

.step-benefits span{

    line-height:1.7;

    color:var(--text);

}

/*=========================================================
TABLET
991px and below
=========================================================*/

@media (max-width:991px){

.how-to-use{

    padding:90px 0;

}

/*=========================================================
TABLET
991px and below
=========================================================*/

.steps-navigation{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    margin:70px 0 60px;

    padding:0;

}

.steps-track{

    position:absolute;

    top:27px;

    left:27px;

    right:27px;

    height:2px;

    background:var(--border);

    z-index:1;

}

.step-button{

    position:relative;

    z-index:2;

    flex:1;                 /* ← this is the important line */

    min-width:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.step-number{

    width:54px;

    height:54px;

    font-size:20px;

}

.step-button span{

    font-size:12px;

    text-align:center;

    white-space:nowrap;

}

/*---------------------------------
CONTENT PANEL
---------------------------------*/

.step-panel{

    display:grid;

    grid-template-columns:1fr;

    gap:40px;

    padding:36px;

}

.step-image{

    justify-content:center;

}

.step-image img{

    width:100%;

    max-width:420px;

}

.step-content{

    align-items:flex-start;

}

}


/*---------------------------------
TIMELINE
---------------------------------*/

.steps-navigation{

    position:relative;

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    width:100%;

    margin:70px 0 60px;

    padding:0;

}

.steps-track{

    position:absolute;

    top:27px;

    left:29px;

    right:29px;

    height:2px;

    background:var(--border);

    z-index:1;

}

.steps-progress{

    height:100%;

}

.step-button{

    position:relative;

    z-index:2;

    flex:1;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:14px;

}

.step-number{

    width:54px;

    height:54px;

    font-size:20px;

}

.step-button span{

    font-size:12px;

    text-align:center;

    white-space:nowrap;

}

/*=========================================================
MOBILE
768px and below
=========================================================*/

@media (max-width:767px){

/*---------------------------------
TIMELINE
---------------------------------*/

.steps-navigation{

    display:flex;

    flex-wrap:nowrap;

    justify-content:flex-start;

    align-items:flex-start;

    gap:10px;

    overflow-x:auto;

    overflow-y:hidden;

    padding:0 16px 14px;

    margin:50px -16px 40px;

    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

}

.steps-navigation::-webkit-scrollbar{

    display:none;

}

.steps-track{

    display:none;

}

.step-button{

    flex:0 0 auto;

    min-width:62px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

}

.step-number{

    width:44px;

    height:44px;

    font-size:18px;

}

.step-button span{

    font-size:10px;

    letter-spacing:.04em;

    white-space:nowrap;

    text-align:center;

}

/*---------------------------------
CONTENT PANEL
---------------------------------*/

.step-panel{

    display:grid;

    grid-template-columns:1fr;

    gap:28px;

    padding:24px;

}

.step-image{

    justify-content:center;

}

.step-image img{

    width:100%;

    max-width:300px;

}

.step-content{

    align-items:flex-start;

}

.step-badge{

    margin-bottom:18px;

}

.step-content h3{

    margin-bottom:16px;

}

.step-content p{

    margin-bottom:24px;

}

.step-benefits{

    gap:16px;

}

.step-benefits li{

    gap:12px;

}

}