*{
    margin-bottom: 20%;
    padding: 0;
}
body{
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    background: #d2cfdc;
}
.body-img{
    width: 100%;
    height: 200px;
    position: absolute;
}
.ourbank-content{
    position: absolute;
    background: #fff;
    color: #000;
    padding: 17px;
    margin: 20px;
    left: 55%;
    top: 6.9%;
    animation: comas 2s;
    display: none;
    border-radius: 20px;
}
.ourbank-content a{
    text-decoration: none;
    margin: 5px;
}
.header-container{
    background: rgb(5, 5, 35);
    height: 100vh;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    width: 100%;
}
header{
    position: relative;
    display: flex;
    flex-direction: row;
}
header img{
    margin-top: 25px;
    margin-left: 80px;
    position: absolute;
    width: 12%;
    height: 70px;
}
header ul{
    display: flex;
    align-items: center;
    margin-top: 40px;
    position: absolute;
    margin-left: 49%;

}
.fa-bars{
    display: none;
    font-size: 35px;
    color: #fff;
}
header ul li{
    list-style: none;
}

@media(max-width:1200px){
    .fa-bars{
        display: block;
    }
    .business-account{
        display: none;
    }
    header ul{
        margin-left: 38%;
    } 
    .new-img-s{
        display: none;
    }
    .inline-images{
        display: none;
    }
    .first-header h1{
        font-size: 10px;
    }
}
header ul li a{
    margin: 15px;
    font-weight: 500;
    color: #fff;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    text-decoration: none;
    font-size: 20px;
}
.Sign-in{
    padding: 15px;
    border-radius: 30px;
    color: #000;
    background: #d6cdf4;
}   
.active{
    background: rgb(184, 184, 209);
    border-radius: 30px;
    color: #fff;
    padding: 16px;
}
.first-header{
    position: absolute;
    margin-left: 90px;
    top: 30%;
}

.first-header .africa{
    display: flex;
    font-size: 20PX;
    justify-content: center;
    align-items: center;
    width: 80%;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 30px;
    text-align: center;
    color: #fff;
    background: #686574;
    padding: 17PX;
}
.first-header .africa p{
    margin-left: 5px;
}
.first-header h1{
    color: #fff;
    margin-top: 16px;
    font-size: 3.4rem;
}
.simple-solution{ 
    color: #1711b1;
}
.collect{
    margin-top: 20px;
    line-height: 34px;
    color: #fff;
    font-size: 20px;
} 
.open-acc{
    font-size: 19px;
    padding: 18px;
    color: #fff;
    position: absolute;
    top: 100%;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    background: #2623f1;
}
.inline-images{
    width: 88%;
    border-radius: 20px;
    top: 98%;
    margin-left: 90px;
    background: #fff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 38px;
    text-align: center;
    position: absolute;
}
.inline-images .write-up{
    display: flex;
    /* background-image: url(/img/pexels-iriser-1366957.jpg); */
    margin-left:15%;
}
.inline-images .write-up h1{
    font-size: 30px;
    
}
.all-the-tools h1{
font-size: 3rem;
position: absolute;
color: #000;
top: 161%;
margin-left: 33%;
font-family:Verdana, Geneva, Tahoma, sans-serif;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
}
.business-account {
    padding: 10px;
    width:46%;
    position: absolute;
    top: 220%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border-radius: 30px;
    text-decoration: none;
    color: #000;
    margin-left: 23%;
}
.business-account a{
    font-size: 18px;
    margin: 15px;
    text-decoration: none;
}
@media(max-width: 620px){
    .new-img-s{
        display: none;
    }
}

.business-account-active{
        position: absolute;
        margin-left: 80px;
        top: 244%;
}
.business-account-active h1{
    color: #000;
    font-weight: 200;
    font-size: 3rem;
}

.business-account-active .active{
    background: #1711b1;
    margin-bottom: 16px;
    font-size: 20px;
    text-align: center;
    width: 40%;
}
.business-account-active p{
    font-size: 20px;
    font-weight: 100;
    margin-top: 10px;
}
.learn-more{
    margin-left: 66%;
    padding: 20px;
    border-radius: 10px;
    width: 27%;
    color: #000;
    position: absolute;
    font-size: 17px;
    text-decoration: none;
    top: 100%;
    background: #2623f1;
}
 .open-acc-pos{
    padding: 20px;
    font-size: 20px;
    color: #fff;
    background: #2623f1;
    top: 30%;
    border-radius: 10px;
    text-decoration: none;
}
.business-account-actives{
    position: absolute;
    display: flex;
    margin-left: 50%;
    top: 333%;
}
.business-account-actives h1{
color: #000;
font-weight: 200;
font-size: 3rem;
}

.business-account-actives .active{
background: #1711b1;
margin-bottom: 6px;
font-size: 20px;
text-align: center;
width: 40%;
}
.business-account-actives p{
font-size: 20px;
font-weight: 100;
margin-top: 5px;
}
.open-acc-pos{
    padding: 20px;
    font-size: 20px;
    color: #fff;
    background: #2623f1;
    top: 40%;
    border-radius: 10px;
}
.new-img-s{
    display: block;
}
.business-img img{
    width: 100%;
    height: 333px;
    left: 133%;
    top: 4%;
    border-radius: 20px;
    position: absolute;
}
.expense-cards img{
    width: 92%;
    height: 333px;
    left: 125%;
    top: 4%;
    border-radius: 20px;
    position: absolute;
}

.expense-card{
    position: absolute;
    top:305%;
    left: 5%;
}
.expense-card h1{
color: #000;
font-weight: 200;
font-size: 3rem;
}

.expense-card .active{
background: #1711b1;
margin-bottom: 6px;
font-size: 20px;
text-align: center;
width: 40%;
}
.expense-card p{
font-size: 20px;
font-weight: 100;
margin-top: 5px;
}

.workings-loans img{
    width: 93%;
    height: 333px;
    left: 132%;
    top: 2%;
    border-radius: 20px;
    position: absolute;
}

.Working-loan{
    position: absolute;
    top: 370%;
    left: 5%;
}
.Working-loan h1{
color: #000;
font-weight: 200;
font-size: 3rem;
}

.Working-loan .active{
background: #1711b1;
margin-bottom: 6px;
font-size: 20px;
width: 50%;
}
.Working-loan p{
font-size: 20px;
font-weight: 100;
margin-top: 5px;
}

.enjoy-business{
    justify-content: center;
    align-items: center;
    background: #2623f1;
    width: 100%;
    height: 60%;
    display: flex;
    text-align: center;
    flex-direction: column;
    position: absolute;
    top: 440%;
}
.enjoy-business h1{
    font-size: 3.5rem;
    font-weight: 400;
    color: #fff;
}

.enjoy-business .enjoy{
    padding: 20px;
    border: none;
    outline: 0;
    border-radius: 20px;
    margin-top: 20px;
    background: #d6cdf4;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-size: 20px;
}
.first-fotter{
    display: flex;
    top: 524%;
    width: 100%;
    height: 100%;
    color: #a2a2bf;
    background: rgb(5, 5, 35);
    /* justify-content: space-between; */
    position: absolute;
}

footer{
    background: rgb(5, 5, 35);
    width: 100%;
    height: 100%;
}
.app-img{
    width: 21%;
    height: 50px;    margin: 10px;
}
.app{
    margin-top: 50px;
    letter-spacing: 1.5px;
    margin-left: 50px;
    font-size: 14px;
}
.table{
    margin-top: 80px;
    margin-left: 15%;
    display: flex;
    font-size: 14px;
}
.table p{
    margin: 20px;
    font-size: 15px;
    font-weight: 100;
}
.table .Header{
    font-size: 20px;
    color: #fff;
}
.second-footer .copy{
    display: flex;
}
.second-footer .copy .cc{
    margin-left: 40px;
}
.second-footer{
    top: 565%;
    height: 60%;
    width: 100%;
    color: #a2a2bf;
    background: rgb(5, 5, 35);
    position: absolute;
}

.second-footer p{
    margin: 50px;
}
.second-footer .ccs{
    margin-bottom: 20px;
    font-size: 15px;
}
#product{
    cursor: pointer;
}
.product-content:hover{
    color: #2623f1;
}
.product-content{
    position: absolute;
    display: none;
    cursor: pointer;
    top: 8%;
    background: #fff;
    padding: 14px;
    margin: 4px;
    border-radius: 10px;
    left: 39%;
}
.product-content a{
    color: #000;
    animation: comas 2s;
    cursor: pointer;
    text-decoration: none;
}
.personal-account{
    margin: 12px;
}
.personal-account i{
    margin-right: 5px;
    background: #48478d;
    padding: 9px;
    cursor: pointer;
    border-radius: 6px;
}
.personal-account i:hover{
    background: #1711b1;
}
@keyframes comas{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}

.respons{
    display: none;
}
.respone-sing-in{
    text-align: center;
    background: #2623f1;
    font-size: 22px;
    color: #000;
    padding: 20px;
    border-radius: 14px;
    cursor: pointer;
}
@media(max-width:2220px){
    .respons{
        display: none;
    }
}
@media(max-width:770px){
    .Sign-in{
        padding: 8px;
        border-radius: 30px;
        color: #000;
        background: #d6cdf4;
    }   
    header ul{
        display: none;
        align-items: center;
        margin-top: 40px;
        position: absolute;
        margin-left: 53%;
    }
    header ul li{
        list-style: none;
    }
    .inline-images{
        right: 70px;
    }
    header ul li a{
        display: none;
        margin: 15px;
        font-weight: 800;
        color: #fff;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-decoration: none;
        font-size: 17px;
    }
    .table p{
        margin: 10px;
    }
    .fa-bars{
        display: block;
        margin-left: 90%;
        cursor: pointer;
        margin-top: 42px;
    }
    .inline-images .write-up .twom{
        font-size: 5rem;
        display: none;
        color: #2623f1;
    }
    .all-the-tools h1{
        font-size: 2rem;
        position: absolute;
        color: #000;
        margin-left: 20px;
        top: 157%;
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        }
        .workings-loans img{
            display: none;
        }
        .expense-cards{
            display: none;
        }
        .business-img{
            display: none;
        }
        .business-account {
            padding: 10px;
            width:80%;
            display: none;
            position: absolute;
            top: 173%;
            background: #fff;
            border-radius: 30px;
            text-decoration: none;
            color: #000;
            margin-left: 30%;
        }
        .new-img-s{
            display: none;
        }
    .holder a{
        position: absolute;
        left: 40%;
        top: 35px;
        justify-content: space-between;
        display: flex;
        font-size: 20px;
        text-decoration: none;
        color: #fff;
        font-weight: 400;
    }
    
    .holders a{
        position: absolute;
        left: 55%;
        top: 47px;
        justify-content: space-between;
        display: flex;
        font-size: 20px;
        text-decoration: none;
        color: #fff;
        font-weight: 400;
    }
    header img{
        margin-top: 25px;
        margin-left: 80px;
        position: absolute;
        width: 15%;
        height: 70px;
    }
    .business-account{
        left: 2%;
        top: 40%;
    }
    .new-img-s{
        display: none;
    }
    .new-img-s{
        display: none;
    }
    .app-img{
        width: 40%;
        height: 30%;
    }

}


.slider-div{
    flex-direction: row;
    display: flex;
    bottom: 40%;
    margin: 40px;
    justify-content: space-between; 
}
.testi-1 h1, p{
    margin: 14px;
}
.testi-1{
    width: 220%;
    height: 330%;
    text-align: start;
    background: #e2e0e0;
    margin: 20px;
    padding: 25px;
    border-radius: 20px;
    font-size: 15px;
}.testi-2{
    width: 220%;
    height: 330%;
    text-align: start;
    background: #e2e0e0;
    margin: 20px;
    padding: 25px;
    border-radius: 20px;
    font-size: 15px;
}.testi-3{
    width: 220%;
    height: 330%;
    text-align: start;
    background: #5f4141;
    margin: 20px;
    color: #e2e0e0;
    padding: 25px;
    border-radius: 20px;
    font-size: 15px;
}.testi-4{
    width: 220%;
    height: 330%;
    text-align: start;
    background: #230f3d;
    margin: 20px;
    color: #d6cdf4;
    padding: 25px;
    border-radius: 20px;
    font-size: 15px;
}.testi-5{
    width: 220%;
    height: 330%;
    text-align: start;
    background: #e2e0e0;
    margin: 20px;
    padding: 25px;
    border-radius: 20px;
    font-size: 15px;
}
.testi-1 h1, p{
    margin: 9px;
}.testi-2 h1, p{
    margin: 9px;
}.testi-3 h1, p{
    margin: 9px;
}.testi-4 h1, p{
    margin: 9px;
}.testi-5 h1, p{
    margin: 9px;
}
.testi-1 p{
    font-size: px;
    line-height: 22px;
}
.testi-2 p{
    font-size: px;
    line-height: 22px;
}.testi-3 p{
    font-size: px;
    line-height: 22px;
}.testi-4 p{
    font-size: px;
    line-height: 22px;
}.testi-5 p{
    font-size: px;
    line-height: 22px;
}

.testi-2{
    width: 220%;
    height: 330%;
    text-align: start;
background: darkcyan;
    margin: 20px;
    padding: 25px;
    color: #fff;
    border-radius: 20px;
    font-size: 15px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.slider{
    /* width: 220%; */
    /* margin: 30px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slide 44s linear infinite;
}
.slider img{
    display: flex;
    justify-content: flex-start;
    /* width: 55.28%; 100% / 7 images */
}

@keyframes slide {
    100% {
        transform: translateX(100%);
    }
    60% {
        transform: translateX(-100%);
    }
}
.img-inline{
    overflow: hidden;
    display: flex;
    /* background: url(/img/pexels-earano-2127969.jpg); */
    margin: 0;
    margin-top: 25px;
    justify-content: space-between;
    align-items: center;
}
.new-img-s img:hover{
    cursor: pointer;
    transform: scale(1.1);
}
.new-img-s img{
    cursor: pointer;
    transition:  transform 0.7s;
}
.new-img-s{
    position: absolute;
    left: 50%;
    width: 44%;
    height: 74%;
    bottom: 14%;
}

@media(max-width:1000px){
    .new-img-s{
        display: none;
    }
    .workings-loans img{
        display: none;
    }
    .business-account{
        top: 110%;
        width: 60%;
        margin-left:180px;
    }
    .expense-cards{
        display: none;
    }
    .business-img{
        display: none;
    }
    .respons{
        display: none;
      }

}
@media(max-width:1111px){
    .workings-loans img{
        display: none;
    }
    .expense-cards{
        display: none;
    } .business-account{
        top: 110%;
        width: 60%;
        margin-left:180px;
    }
    .first-header h1{
        font-size:3rem;
    }
    .business-img{
        display: none;
    }
    .new-img-s{
        display: none;
    }

    .business-account-active{
        top: 134%;
    }
    .expense-card{
        margin-left: 25px;
        top: 193%;
    }
    .Working-loan{
        top: 249%;
        margin-left: 25px;
    }
    .enjoy-business{
        top: 310%;
    }
    .enjoy-business h1{
        font-size: 3rem;
    }
    .first-fotter{
        top: 380%;
    }
    .first-fotter .app{
        display: none;
    }
    .second-footer{
        top: 428%;
  }
  .respons{
    display: none;
  }
    .product-content{
        left: 20%;
    }
}


@media(max-width:850px){
    .product-content{
        left: 20%;
        position: absolute;
    }
   header ul{
        margin-left: 22%;
    } 
    .workings-loans img{
        display: none;
    }
    .expense-cards{
        display: none;
    }
    .business-img{
        display: none;
    }
    .fa-bars{
        display: block;
    }
    .business-account-active{
        margin-top: 222px;
    }
    .expense-card{
        margin-left: 50px;
        top: 170%;
    }
    .Working-loan{
        top: 230%;
        margin-left: 50px;
    }
    .enjoy-business{
        top: 310%;
    }
    .enjoy-business h1{
        font-size: 3rem;
    }
    .first-fotter{
        top: 380%;
    }
    .first-fotter .app{
        display: none;
    }
    .second-footer{
        top: 428%;
    }
    .new-img-s{
        display: none;
    }
    .first-header .africa{
        display: flex;
        font-size: 20PX;
    }
    .first-header h1{
        font-size: 12px;
        display: none;
    }

    .business-account{
        display: none;
    }
    .business-account-active{
        margin-left: 80px;
        top: 70%;
    }

    .respons{
        display: none;
        width: 44%;
        position: absolute;
        left: 52%;
        padding: 28px;
        top: 12%;
        border-radius: 20px;
        text-align: start;
        /* margin: 30px; */
        color: #372a2a;
        font-weight: 200;
        background: #fff;
        font-size: 10px;
    }
    .respons:hover{
        color: #000;
        background: #d8d8e6;
    }
    .respons a:hover{
        color: #000;
    }
    .respons a{
        display: flex;
        margin: 10px;
        font-size: 20px;
        text-decoration: none;
    }
    .res-hed{
        font-size: 22px;
        font-weight: 600;
        color: #000;
    }
    .respone-sing-in{
        text-align: center;
        background: #2623f1;
        font-size: 22px;
        color: #000;
        padding: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 14px;
        cursor: pointer;
    }
}
#FOTTTTTTER .first-fotter, .second-footer{
    margin-top: 0%;
}