/*==================================================
                HOW IT WORKS
==================================================*/

.how-section{
    padding:80px 0;
    background:#fff;
}

.how-header{
    max-width:760px;
    margin:0 auto 35px;
    text-align:center;
}

.how-tag{
    display:inline-block;
    color:#F4BF19;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.how-header h2{
    font-size:44px;
    font-weight:800;
    color:#083D2B;
    line-height:1.15;
    margin-bottom:16px;
}

.how-header h2 span{
    display:block;
    color:#F4BF19;
}

.how-header p{
    max-width:600px;
    margin:auto;
    margin-bottom:0;
    font-size:17px;
    line-height:1.7;
}

/*==================== Timeline ====================*/

.how-timeline{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
    margin-top:15px;
}

.timeline-step{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    max-width:280px;
    padding:0 20px;
    margin:0;

    min-height:unset;
    height:auto;
}

.step-circle{

    width:82px;

    height:82px;

    margin:0 auto 12px;

    border-radius:50%;

    background:#083D2B;

    color:#F4BF19;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    box-shadow:0 15px 35px rgba(8,61,43,.15);

    transition:.35s;

}

.timeline-step:hover .step-circle{

    transform:translateY(-8px) scale(1.06);

}

.timeline-step h3{

    margin:0 auto;
    margin-bottom:6px;
    max-width:240px;
    font-size:15px;
    line-height:1.7;
    color:#083D2B;

    font-weight:700;

}

.timeline-step p{

    color:#6B7280;
    line-height:1.65;
    margin:0;
    margin-bottom:0;
    display:inline-block;
    font-size:15px;

}

.timeline-line{

    width:140px;

    height:2px;

    margin-top:28px;

    background:repeating-linear-gradient(
        to right,
        #F4BF19 0 8px,
        transparent 8px 16px
    );

}

/*==================== Download ====================*/

.how-download{
    max-width:700px;
    margin:35px auto 0;
    background:#083D2B;
    border-radius:22px;
    box-shadow:0 20px 60px rgba(8,61,43,.18);
    padding:22px 28px;
    color:#fff;
    text-align:center;
}

.how-download h4{
    font-size:22px;
    margin-bottom:10px;
    font-weight:700;
}

.how-download p{

    max-width:520px;
    margin:0 auto 22px;
    font-size:15px;
    color:rgba(255,255,255,.85);
    line-height:1.6;

}

.download-buttons{

    display:flex;

    justify-content:center;

    gap:12px;

    flex-wrap:wrap;
    margin-top:4px;

}

.store-btn{

    display:flex;

    align-items:center;

    gap:15px;

    padding:14px 24px;
    min-width:155px;

    background:#fff;

    color:#083D2B;

    border-radius:12px;

    text-decoration:none;

    transition:.35s;

    font-weight:700;

}

.store-btn i{

    font-size:22px;

    color:#F4BF19;

}

.store-btn span{

    display:flex;

    flex-direction:column;

    text-align:left;

}

.store-btn small{

    font-size:11px;

    opacity:.7;

    letter-spacing:1px;

}

.store-btn:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 30px rgba(0,0,0,.15);

}

/*==================== Responsive ====================*/

@media(max-width:991px){

.how-header h2{

font-size:42px;

}

.how-timeline{

flex-direction:column;

align-items:center;

}

.timeline-line{

width:2px;

height:60px;

margin:0;

background:repeating-linear-gradient(
to bottom,
#F4BF19 0 8px,
transparent 8px 16px
);

}

.how-download{

padding:35px 25px;

}

}

@media(max-width:576px){

.how-section{

padding:80px 0;

}

.how-header{

margin-bottom:45px;

}

.how-header h2{

font-size:34px;

}

.timeline-step h3{

font-size:24px;

}

.how-download h4{

font-size:28px;

}

.store-btn{

width:100%;

justify-content:center;

}

.store-btn span{

text-align:center;

}

}