body{
    margin: 0;
    padding: 0;
    background-color: #f2f7f8;
    font-family: Arial, Helvetica, sans-serif;
}

#navigator{
    font-family: Arial, Helvetica, sans-serif;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    height: 110px;
}
#navigator img{
    margin-top: -12px;
}
#navigator ul{
    padding-top: 30px;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
}
#navigator li.sign{
    text-align: center;
}
#navigator li.sign a{
    background-color: white;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
    
}
#navigator a{
    text-decoration: none;
    color: black;
    font-weight: bold;
}
#navigator li.account{
    text-align: center;
    margin-right: 150px;
}
#navigator li.account a{
    color: white;
    background-color: black;
    border: 1px solid black;
    padding: 20px;
    border-radius: 10px;
}


#im{
    display: flex;
    justify-content: center;
    margin-top: 270px;
}

#mid{
    width: 470px;
    height: 350px;
    font-size: 30px;
    margin-right: 70px;
}
#mid p{
    font-weight: lighter;
    font-size: 20px;
    line-height: 40px;
}
#mid div{
    display: inline-block;
}
#mid div a{
    font-size: 17px;
    text-decoration: none;
    color: #fff;
    text-align: center;
    background-color: black;
    border-radius: 8px;
    padding: 14px 10px;
}
#mid div{
    transition: 0.5s;
}
#mid div:hover{
    transform: translate(0px, -6px);
}
.apple img{
    width: 16px;
}
.play img{
    width: 20px;
}


#abt{
    background-image: url(abt.jpg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    cursor: pointer;
    width: 400px;
    height: 350px;
    padding: 30px;
    border: 10px solid white;
    border-radius: 16px;
    margin-left: 40px;
    margin-top: -30px;
    z-index: -1;
}
#abt{
    position: relative;
    animation: water 4s ease-in-out infinite;
}
@keyframes water {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-25px);
    }
  }


#abt .yfit img{
    width: 225px;
    margin-top: 225px;
    margin-left: 300px;
}

#abt .kcol img{
   width: 225px;
}
#abt .kcol{
    margin-top: -260px;
    margin-left: -110px;
}

#abt .sgni img{
    width: 215px;
}
#abt .sgni{
    margin-top: -110px;
    margin-left: 275px;
}

#abt .aria img{
    width: 215px;
}
#abt .aria{
    margin-top: 140px;
    margin-left: -110px;
}

#abt .knab img{
    width: 200px;
}
#abt .knab{
    margin-top: 37px;
    margin-left: 110px;
}


#second{
    margin-top: 100px;
    margin-right: 110px;
    display: flex;
    justify-content: center;
    padding: 50px;
}
#locker{
    width: 800px;
    font-size: 20px;
    margin-left: 30px;
    margin-top: -50px;
}
.si{
    font-weight: bolder;
}
#locker a{
    text-decoration: none;
    color: black;
}


#third{
    display: flex;
    justify-content: center;
    font-size: 20px;
    margin-top: 60px;
}

#build{
    width: 400px;
    height: 350px;
    padding: 50px;
    margin-right: 30px;
    font-size: 30px;
    text-align: center;
}
#build p{
    font-size: 25px;
}
#savings{
    width: 400px;
    height: 350px;
    padding: 50px;
    font-size: 22px;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.5s;
}
#savings:hover{
    background-color: rgb(51, 51, 164);
    color: white;
    background-image: url(iPhone\ 14-11.avif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}

#forth{
        display: flex;
        justify-content: center;
        font-size: 20px;
        margin-top: 40px;
}
#until{
    width: 400px;
    height: 350px;
    padding: 50px;
    font-size: 22px;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 30px;
    transition: 0.5s;
}
#until:hover{
    color: white;
    background-color: rgb(31, 139, 240);
    background-image: url(iPhone\ 14\ -\ 22\ \(1\).avif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}
#target{
    width: 400px;
    height: 350px;
    padding: 50px;
    font-size: 22px;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.5s;
}
#target:hover{
    color: white;
    background-color: rgb(57, 173, 57);
    background-image: url(iphonw.avif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}

#fifth{
    display: flex;
    justify-content: center;
    font-size: 20px;
    margin-top: 40px;
}
#naira{
    width: 400px;
    height: 350px;
    padding: 50px;
    font-size: 22px;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    margin-right: 30px;
    transition: 0.5s;
}
#naira:hover{
    color: white;
    background-color: rgb(225, 31, 167);
    background-image: url(iPhone\ 14.avif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}
#dollar{
    width: 400px;
    height: 350px;
    padding: 50px;
    font-size: 22px;
    background-color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: 0.5s;
}
#dollar:hover{
    color: white;
    background-color: black;
    background-image: url(iphone12.avif);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 40%;
}



#diverse{
    background-color: white;
    text-align: center;
    width: 100%;
    height: 950px;
    margin-top: 100px;
    padding-top: 100px;
    font-size: 30px;
}


#diverse p{
    font-size: 20px;
}
#diverse h1{
    font-size: 50px;
}
#diverse .future{
    margin-top: -30px;
    font-size: 25px;
    color: rgb(88, 88, 88);
}

#returns{
    margin: 0 auto;
}
#returns{
    display: flex;
    color: white;
    background-color: rgb(130, 15, 237);
    width: 1200px;
    height: 500px;
    text-align: center; 
    border-radius: 30px;
    margin-top: 60px;
}
#returns p{
    font-size: 20px;
}
#returns .your{
    color: #fed6f1;
}
#returns .ruoy{
    font-weight: bold;
}

#returns .ssalc{
    text-align: left;
    padding: 30px;
    line-height: 30px;

}

#returns .enenen{
    margin-top: 76px;
    margin-left: 140px;
}

#returns .enenen img{
    width: 425px;
}



#culture{
    text-align: center;
    font-size: 35px;
    padding: 110px;
}
#culture p{
    font-size: 25px;
    margin-top: -30px;
    color: rgb(88, 88, 88);
}
#culture iframe{
    margin: 80px;
    border: 10px solid white;
    border-radius: 20px;
}



#mkjn{
    display: flex;
    justify-content: center;
    background-color: #f2f7f8;
}

.kcab img{
    width: 100%;
}
.kcab{
    margin-left: 30px;
}
.noil{
    margin-right: 400px;
    margin-top: 210px;
    margin-left: 75px;
}
.noil h1{
    font-size: 40px;
}
.noil div{
    display: inline-block;
    transition: 0.5s;
}
.noil div:hover{
    transform: translate(0px, -6px);
}
.noil a{
    border: 1px solid rgb(205, 204, 204);
    text-decoration: none;
    color: black;
    text-align: center;
    padding: 16px;
    border-radius: 10px;
}
.ferh{
    margin-right: 10px;
}



#nineth{
    background-color: #fffdfd;
    margin-top: -30px;
}

#pynmt{
    text-align: center;
    font-size: 27px;
}
#pynmt img{
    display: inline-block;
    margin-right: 20px;
    padding: 40px;   
}
#pynmt h1{
    margin-bottom: -30px;
    padding-top: 50px;
}


#tenth{
    display: flex;
    justify-content: space-around;
    margin-top: 150px;
    font-size: 17px;
}
#compliance{
    margin-left: 40px;
}
#compliance img{
    display: block;
}
img.ecna{
    margin: 10px 0 0 50px;
}
table{
    text-align: left;
}
th,td{
    padding: 0 70px 20px 70px;
}
#tenth a{
    text-decoration: none;
    display: block;
    color: rgb(88, 88, 88);    
}
#tenth p{
    color: rgb(88, 88, 88);
}
#tenth a:hover{
    color: rgb(0, 0, 193);
}
#tesmot{
    text-align: right;
    margin-right: 30px;
}
#tesmot img{
    margin-left: 10px;
}
hr{
    width: 90%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    margin-top: 50px;
}
#rhrh p{
    line-height: 30px;
    color: rgb(88, 88, 88);
    font-size: 15px;
    margin-left: 83px;
}
#rhrh{
    height: 275px;
}
#rhrh #detimi{
    color: rgb(0, 0, 193);
}
    

/* =====MEDIA QUERIES=====*/
@media only screen and (max-width:600px){
    body{
        margin: 0;
        padding: 0px;
        width: 100%;
    }
    #header{
        width: 410px;
        margin: 0 auto;
    }
    .save, .invest,
    .stories, .faqs, .resources, .account{
        display: none;
    }

    
    #navigator img{
        width: 170px;
        padding-top: 5px;
    }
    #navigator li.sign a{
        padding: 10px;
        margin: 0px;
        margin-right: 20px;
    }


    #im{
        display: block;
        margin-top: 240px;
    }
    #mid{
        display: block;
        width: 380px;
        height: 350px;
        text-align: center;
        margin: 10px;
        padding: 0;
    }
    #mid h2{
        font-size: 40px;
    }
    #mid p{
        font-size: 19px;
        line-height: 25px;
    }
    #mid div a{
        font-size: 17px;
        font-weight: bold;
    }
    #mid div{
        margin-top: 25px;
    }


    #abt{
        display: block;
        width: 380px;
        height: 370px;
        margin: 10px;
        padding: 0px;
    }
    #abt .yfit img{
        width: 140px;
        margin-top: 250px;
        margin-left: 250px;
    }
    #abt .kcol img{
        width: 140px;
        margin-left: 100px;
        margin-top: 40px;
    }
    #abt .sgni img{
        width: 140px;
        margin-left: -30px;
        margin-top: 75px;
    }
    #abt .aria img{
        width: 140px;
    }
    #abt .aria{
        margin-top: 100px;
        margin-left: -5px;
    }
    #abt .knab img{
        width: 140px;
    }
    #abt .knab{
        margin-top:35px;
        margin-left: 120px;
    }

    #second{
        display: block;
        padding: 0px;
        margin: 0px;
    }
    #lock{
        margin: 0px 100px;
        margin-top: 10px;
        margin-bottom: 0px;
        width: 200px;
        height: 200px;
        text-align: center;
        padding-top: 100px;
    }
    #locker{
        width: 380px;
        height: 380px;
        margin: 10px;
        margin-top: 0px;
        text-align: center;
        font-size: 30px;
    }
    #locker p{
        font-size: 20px;
        line-height: 25px;
    }

    #third{
        display: block;
        margin: 0px;
    }
    #build{
        width: 380px;
        height: 300px;
        text-align: center;
        margin: 10px;
        margin-top: 60px;
        padding: 0px;
        font-size: 26px;
    }
    #build p{
        font-size: 19px;
        line-height: 30px;
    }
    #savings{
        width: 370px;
        margin: 10px;
        margin-top: -50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #savings p{
        font-size: 19px;
        line-height: 30px;
    }
    #savings .terminal{
        text-align: left;
        padding-left: 30px;
    }


    #forth{
        display: block;
        margin: 0px;
    }
    #until{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #until p{
        font-size: 19px;
        line-height: 30px;
    }
    #until .terminal{
        text-align: left;
        padding-left: 30px;
    }
    #target{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 30px;
    }
    #target p{
        font-size: 19px;
        line-height: 25px;
    }
    #target .terminal{
        text-align: left;
        padding-left: 30px;
        margin-top: -15px;
    }


    #fifth{
        display: block;
        margin: 0px;
    }
    #naira{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #naira p{
        font-size: 19px;
        line-height: 30px;
    }
    #naira .terminal{
        text-align: left;
        padding-left: 30px;
    }
    #dollar{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #dollar p{
        font-size: 19px;
        line-height: 30px;
    }
    #dollar .terminal{
        text-align: left;
        padding-left: 30px;
    }


    #diverse{
        margin: 10px;
        margin-top: 30px;
        padding: 0px;
        width: 380px;
        height: 930px;
        text-align: center;
    }
    #diverse h1{
        font-size: 30px;
        padding-top: 55px;
    }
    #diverse .future{
        margin: 0px;
        font-size: 19px;
        line-height: 25px;
    }
    #returns{
        display: block;
        margin: 10px;
        margin-top: 25px;
        width: 360px;
        height: 620px;
        border-radius: 20px;
    }
    #returns .ssalc{
        margin: 0px;
        margin-top: 30px;
        padding: 10px;
        padding-top: 0px;
        text-align: center;
        line-height: 27px;
        height: 301.5px;
    }
    #returns .ssalc h2{
        font-size: 30px;
        padding-top: 30px;
    }
    #returns .ssalc p{
        font-size: 18px;
    }
    .ssalc p.ruoy{
        margin-top: -70px;
    }
    #returns .enenen img{
        width: 310px;
    }
    #returns .enenen{
        margin: 0px;
    }


    #culture{
        margin: 10px;
        margin-top: 60px;
        padding: 10px;
        width: 380px;
        height: 800px;
        text-align: center;
        font-size: 18px;
    }
    #culture p{
        font-size: 19px;
        margin: 0px;
        line-height: 30px;
    }
    #culture iframe{
        width: 360px;
        height: 420px;
        margin: 0px;
        margin-top: 30px;
    }


    #mkjn{
        display: block;
        width: 380px;
        height: 750px;
        margin: 10px;
        margin-top: 0px;
    }
    .kcab{
        margin: 0px;
    }
    .noil{
        margin: 0px;
        margin-top: 30px;
        text-align: center;
        font-size: 16px;
    }
    .noil div{
        margin-top: 20px;
    }
    .noil h1{
        font-size: 30px;
    }
    .noil img{
        width: 15px;
    }


    #nineth{
        width: 100%;
    }
    #pynmt{
        width: 380px;
        margin: 10px;
        text-align: center;
        font-size: 25px;
    }
    #pynmt h1{
        margin: 0px;
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #pynmt img{
        margin: 0px;
        padding: 20px;
        width: 38%;
    }

    #tenth{
        display: block;
        width: 380px;
        margin: 10px;
        margin-top: 100px;
    }
    #compliance{
        margin: 0px;
    }
    #compliance img{
        width: 150px;
        margin: 0px;
        padding: 10px;
    }
    #tenth table{
        margin: 0px;
        margin-top: 40px;
        padding: 0px;
    }
    th,td{
        padding: 0px 15px 10px 15px;
    }
    table a{
        font-size: 16px;
    }
    th{
        font-size: 18px;
    }

    #tesmot{
        text-align: left;
        margin: 0px;
        margin-top: 35px;
        padding-left: 15px;
    }
    #tesmot p{
        font-size: 16px;
        line-height: 25px;
    }
    #tesmot img{
        margin-right: 8px;
    }

    #rhrh{
        width: 380px;
        margin: 10px;
        margin-bottom: 0px;
        display: block;
    }
    #rhrh p{
        margin: 0px;
        font-size: 10px;
        line-height: 25px;
    }
    hr{
        margin-bottom: 20px;
    }

    




}

@media only screen and (max-width:980px){
    body{
        margin: 0;
        padding: 0px;
        width: 100%;
    }
    #header{
        width: 410px;
        margin: 0 auto;
    }
    .save, .invest,
    .stories, .faqs, .resources, .account{
        display: none;
    }
    
    #navigator img{
        width: 170px;
        padding-top: 5px;
    }
    #navigator li.sign a{
        padding: 10px;
        margin: 0px;
        margin-right: 20px;
    }

    #im{
        display: block;
        margin-top: 240px;
    }
    #mid{
        display: block;
        width: 380px;
        height: 350px;
        text-align: center;
        margin: 10px;
        padding: 0;
    }
    #mid h2{
        font-size: 40px;
    }
    #mid p{
        font-size: 19px;
        line-height: 25px;
    }
    #mid div a{
        font-size: 17px;
        font-weight: bold;
    }
    #mid div{
        margin-top: 25px;
    }


    #abt{
        display: block;
        width: 380px;
        height: 370px;
        margin: 10px;
        padding: 0px;
    }
    #abt .yfit img{
        width: 140px;
        margin-top: 250px;
        margin-left: 250px;
    }
    #abt .kcol img{
        width: 140px;
        margin-left: 100px;
        margin-top: 40px;
    }
    #abt .sgni img{
        width: 140px;
        margin-left: -30px;
        margin-top: 75px;
    }
    #abt .aria img{
        width: 140px;
    }
    #abt .aria{
        margin-top: 100px;
        margin-left: -5px;
    }
    #abt .knab img{
        width: 140px;
    }
    #abt .knab{
        margin-top:35px;
        margin-left: 120px;
    }

    #second{
        display: block;
        padding: 0px;
        margin: 0px;
    }
    #lock{
        margin: 0px 100px;
        margin-top: 10px;
        margin-bottom: 0px;
        width: 200px;
        height: 200px;
        text-align: center;
        padding-top: 100px;
    }
    #locker{
        width: 380px;
        height: 380px;
        margin: 10px;
        margin-top: 0px;
        text-align: center;
        font-size: 30px;
    }
    #locker p{
        font-size: 20px;
        line-height: 25px;
    }

    #third{
        display: block;
        margin: 0px;
    }
    #build{
        width: 380px;
        height: 300px;
        text-align: center;
        margin: 10px;
        margin-top: 60px;
        padding: 0px;
        font-size: 26px;
    }
    #build p{
        font-size: 19px;
        line-height: 30px;
    }
    #savings{
        width: 370px;
        margin: 10px;
        margin-top: -50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #savings p{
        font-size: 19px;
        line-height: 30px;
    }
    #savings .terminal{
        text-align: left;
        padding-left: 30px;
    }


    #forth{
        display: block;
        margin: 0px;
    }
    #until{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #until p{
        font-size: 19px;
        line-height: 30px;
    }
    #until .terminal{
        text-align: left;
        padding-left: 30px;
    }
    #target{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 30px;
    }
    #target p{
        font-size: 19px;
        line-height: 25px;
    }
    #target .terminal{
        text-align: left;
        padding-left: 30px;
        margin-top: -15px;
    }


    #fifth{
        display: block;
        margin: 0px;
    }
    #naira{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #naira p{
        font-size: 19px;
        line-height: 30px;
    }
    #naira .terminal{
        text-align: left;
        padding-left: 30px;
    }
    #dollar{
        width: 370px;
        margin: 10px;
        margin-top: 50px;
        height: 430px;
        text-align: center;
        padding: 10px;
        font-size: 26px;
        padding-top: 40px;
    }
    #dollar p{
        font-size: 19px;
        line-height: 30px;
    }
    #dollar .terminal{
        text-align: left;
        padding-left: 30px;
    }


    #diverse{
        margin: 10px;
        margin-top: 30px;
        padding: 0px;
        width: 380px;
        height: 930px;
        text-align: center;
    }
    #diverse h1{
        font-size: 30px;
        padding-top: 55px;
    }
    #diverse .future{
        margin: 0px;
        font-size: 19px;
        line-height: 25px;
    }
    #returns{
        display: block;
        margin: 10px;
        margin-top: 25px;
        width: 360px;
        height: 620px;
        border-radius: 20px;
    }
    #returns .ssalc{
        margin: 0px;
        margin-top: 30px;
        padding: 10px;
        padding-top: 0px;
        text-align: center;
        line-height: 27px;
        height: 301.5px;
    }
    #returns .ssalc h2{
        font-size: 30px;
        padding-top: 30px;
    }
    #returns .ssalc p{
        font-size: 18px;
    }
    .ssalc p.ruoy{
        margin-top: -70px;
    }
    #returns .enenen img{
        width: 310px;
    }
    #returns .enenen{
        margin: 0px;
    }


    #culture{
        margin: 10px;
        margin-top: 60px;
        padding: 10px;
        width: 380px;
        height: 800px;
        text-align: center;
        font-size: 18px;
    }
    #culture p{
        font-size: 19px;
        margin: 0px;
        line-height: 30px;
    }
    #culture iframe{
        width: 360px;
        height: 420px;
        margin: 0px;
        margin-top: 30px;
    }


    #mkjn{
        display: block;
        width: 380px;
        height: 750px;
        margin: 10px;
        margin-top: 0px;
    }
    .kcab{
        margin: 0px;
    }
    .noil{
        margin: 0px;
        margin-top: 30px;
        text-align: center;
        font-size: 16px;
    }
    .noil div{
        margin-top: 20px;
    }
    .noil h1{
        font-size: 30px;
    }
    .noil img{
        width: 15px;
    }


    #nineth{
        width: 100%;
    }
    #pynmt{
        width: 380px;
        margin: 10px;
        text-align: center;
        font-size: 25px;
    }
    #pynmt h1{
        margin: 0px;
        padding: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    #pynmt img{
        margin: 0px;
        padding: 20px;
        width: 38%;
    }

    #tenth{
        display: block;
        width: 380px;
        margin: 10px;
        margin-top: 100px;
    }
    #compliance{
        margin: 0px;
    }
    #compliance img{
        width: 150px;
        margin: 0px;
        padding: 10px;
    }
    #tenth table{
        margin: 0px;
        margin-top: 40px;
        padding: 0px;
    }
    th,td{
        padding: 0px 15px 10px 15px;
    }
    table a{
        font-size: 16px;
    }
    th{
        font-size: 18px;
    }

    #tesmot{
        text-align: left;
        margin: 0px;
        margin-top: 35px;
        padding-left: 15px;
    }
    #tesmot p{
        font-size: 16px;
        line-height: 25px;
    }
    #tesmot img{
        margin-right: 8px;
    }

    #rhrh{
        width: 380px;
        margin: 10px;
        margin-bottom: 0px;
        display: block;
    }
    #rhrh p{
        margin: 0px;
        font-size: 10px;
        line-height: 25px;
    }
    hr{
        margin-bottom: 20px;
    }

    




}