.btn-wapp{
    display: inline-flex;
    background-color:#132A3C;
    color:#fff;
    border-radius:30px;
    padding:15px 25px;
}
.btn-wapp span{
    position: relative;
    display: inline-flex;
    align-items:center;
    color:#fff !important;
    text-transform: uppercase;
    font-weight:bold;
    gap:10px;
}
.btn-wapp span::before{
    content:'';
    background-image:url('../images/icn-wapp.svg');
    background-position:center;
    background-size:contain;
    background-repeat:no-repeat;
    display: inline-block;
    width:32px;
    height:32px;
}
.btn-wapp.white{
    color:#132A3C;
    background-color:#fff;
}
.btn-wapp.white span{
    color:#132A3C !important;
}


#hero{
    --content-width:1000px;
    background: linear-gradient(180deg, #236598 0%, #132A3C 52%, #132A3C 100%);
    margin-top:0 !important;
    padding-top:70px !important;
    padding-bottom:80px !important;
    border-radius:0 0 80px 80px;
    position: relative;
    z-index:4;
}
#hero .btn-wapp{
    align-self:flex-start;
}
.hero > .container > *:nth-child(1) > img{
    margin-bottom:40px;
}
.hero h1{
    font-size:3.125em;
    line-height:1.15em;
    display: flex;
    flex-direction:column;
    margin-bottom:0 !important;
}
.hero h1 > span{
    font-size:1.1em;
}
.hero h1 > small{
    font-family:inherit;
    font-size:.5em;
}
.hero .btn{
    text-transform: none !important;
    pointer-events:none;
    letter-spacing:unset !important;
    font-size:1em !important;
    font-weight:500 !important;
    background-color:var(--c-secondary) !important;
}
.hero-apps{
    display: flex;
    flex-wrap:wrap;
    gap:8px;
}
.hero-apps img{
    height:43px;
    width:auto;
}


.banks{
    background-color:#fff;
    display: flex;
    justify-content:center;
    gap:10px;
    padding:20px;
    position: relative;
    border-radius:20px;
    width:100%;
}
.banks-div h4 small{
    font-size:8px;
}
.banks-list{
    display: flex;
    flex-wrap:wrap;
}
.banks-list img {
    width:auto;
    max-height:26px;
}
.banks-div{
    flex-wrap:nowrap;
}
.banks-div > .col{
    flex-basis:unset !important;
    flex-grow:unset !important;
}
.banks-div > .col > h4{
    font-size:1em;
    font-weight:400 !important;
}

.banks.others{
    justify-content:center;
}
.banks-title{
    background-color: var(--c-secondary);
    color:var(--c-text-alt);
    font-size:15px;
    padding:10px;
    line-height:1em;
    border-radius:8px;
    position: absolute;
    top:0;
    left:50%;
    transform:translate(-50%,-60%);
    transition:all .2s linear;
    user-select:none;
    -moz-user-select:none;
}
.banks:hover .banks-title{
    background-color:var(--c-main);
}

.feature{
    margin-top:40px;
    color:var(--c-text);
    background: #FFFFFF;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    padding:30px;
    text-align: center;
    position: relative;
}
.feature > img{
    margin-top:-30px;
    margin-bottom:-30px;
    transform:translateY(-50%);   
}
.feature > h5{
    font-size:1em !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    color:var(--c-secondary);
}
:is(.feature, .step) b{
    color:var(--c-main);
}

#choose-us{
    padding-top:100px;
    padding-bottom:100px;
    border-radius:0 0 80px 80px;
    background-color:#fff;
    position: relative;
    z-index:3;
}
#choose-us .feature > img{
    max-width:114px !important;
}
#choose-us .feature:nth-child(1)::after, #choose-us .feature:nth-child(3)::after{
    content:'' !important;
    display: block !important;
    position: absolute;
    width:var(--w, 25px);
    padding-top:calc(25/17 * var(--w, 25px));
    background-image:url('../images/icon-usd-2.svg');
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    opacity:1;
    z-index:-1;
}
#choose-us .feature:nth-child(1)::after{
    --w:6vw;
    left:0;
    bottom:0;
    transform:translateX(-44%) translateY(60%) rotate(-27deg);
}
#choose-us .feature:nth-child(3)::after{
    --w:14vw;
    right:0;
    top:0;
    transform:translateX(35%) translateY(-65%) rotate(9deg);
}
.choose-us__image{
    position: absolute;
    top:0;
    right:0;
    pointer-events:none;
    transform:translate(50%, 16%);
    width:calc(100% + 40px);
}


#change-us{
    background-color:#f5f5f5;
    margin-top:-80px;
    padding-top:180px;
    padding-bottom:100px;
    border-radius:0 0 80px 80px;
    position: relative;
    z-index:2;
    --content-width:900px;
    --gap:80px;
}
#change-us .cols-3{
    padding-bottom:80px;
}
#change-us .feature{
    box-shadow:0 0 40px 0 rgba(0,0,0,.05);
}
#change-us .feature > h5{
    display: flex;
    flex-direction:column;
    font-size:2.4em !important;
    gap:0;
    line-height:1em;
}
#change-us .feature > h5 > small{
    font-size:.75em;
}
#change-us .feature > p{
    color:#616C7A;
    font-size:1.2em !important;
    line-height:1.3em;
    font-weight: bold;
}
#change-us .feature > img{
    margin-top:unset;
    margin-bottom:40px;
    transform:unset;
    max-width:100px !important;
}
#change-us .feature:nth-child(2n){
    transform:translateY(80px);
}

#howit .steps{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:var(--g, 80px) 40px;
    counter-reset:steps;
    margin-top:-80px;
    position: relative;
    z-index:1;
    padding:180px 0 100px;
    --gap:80px;
}
.step{
    background: #FFFFFF;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    position: relative;
    padding:40px 40px;
    width:100%;
}
.step::after{
    counter-increment:steps;
    content:counter(steps);
    height:60px;
    width:60px;
    border-radius:60px;
    font-size:40px;
    color:var(--c-text-alt);
    background-color:var(--c-main);
    display: flex;
    align-items:center;
    justify-content:center;
    line-height:1em;
    position: absolute;
    font-weight:bold;
    left:0;
    top:0;
    transform:translate(-40%,-40%);
}
.step :is(strong, b){
    display: inline-block;
}
#howit .step h5{
    text-transform: uppercase;
}
#howit .steps > .step:nth-child(2){
    transform:translateY(calc(50% + var(--g, 80px)/2));
}
#howit .steps > .step:nth-child(2)::after{
    left:unset;
    right:0;
    transform:translate(40%,-40%);
}
#howit .steps{
    position: relative;
}
#howit .steps > .step p{
    margin-bottom:0 !important;
}

#howit :is(.col-35, .col-65){
    position: relative;
}

#howit .col-35::before, 
#howit .col-65::before{
    content:'';
    position: absolute;
    z-index:-1;
    display: block;
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    background-image:url('../images/icon-usd-2.svg');
    width:var(--w, 123px);
    padding-top:calc(207/123 * var(--w, 123px));
    top:50%;
    left:0;
    transform:translateY(-50%) translateX(-100%) rotate(-32deg);
    opacity:1;
}

#howit .col-35::before{
    --w:200px;
    left:0;
    right:unset;
    transform:translateY(-90%) translateX(-20%) rotate(-10deg);
}

#howit .col-65::before{
    --w:144px;
    left:unset;
    right:0;
    top:unset;
    bottom:0;
    transform:translateY(calc(40% - 40px)) rotate(30deg);
}

@media screen and (min-width:480px) and (max-width:767px){
    #howit .col-35{
        display: none;
    }
    #howit > .container{
        display: flex;
        flex-direction:column;
        gap:40px;
    }
    #howit .steps{
        padding-bottom:0;
        padding-top:0;
        margin-top:0;
    }
}
@media screen and (max-width:480px){
    #hero > .container:nth-child(1) > .col-60{
        align-items:center;
        text-align: center;
    }
    #hero .btn-wapp{
        margin-left:auto;
        margin-right:auto;
    }
    .banks-list{
        justify-content:center;
    }
    .hero-image{
        text-align: center;
    }
    .hero-image img{
        width:60%;
    }
    #howit .col-35{
        order:2;
    }
    #howit .col-35 img{
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }
    #howit .steps{
        --g: 30px;
        display: flex !important;
        padding-top:60px;
        padding-bottom:0;
        margin-top:0;
    }
    #howit .steps > .step:nth-child(2){
        transform:unset;
    }
    #howit .btn-wapp{
        z-index:2;
        margin-top:20px;
    }
    #change-us .cols-3{
        padding-bottom:0;
    }
    #change-us .feature{
        margin-top:0;
    }
    #change-us .feature:nth-child(2n){
        transform:unset;
    }
    #change-us .cols-3{
        --gap:30px;
    }
}