* {
    margin: 0;
    padding: 0;
    font-family: "Catamaran",sans-serif
}

body {
    overflow-x: hidden
}

p {
    font-size: 18px !important
}

.navbar,.bottom_bar {
    box-shadow: none;
    background: linear-gradient(152deg, #44449b, #111)
}

.navbar .nav-link,.bottom_bar .nav-link {
    color: #fff;
    font-size: 17px
}

.navbar .nav-link:hover,.bottom_bar .nav-link:hover {
    color: #74cfc0
}

.navbar .btn-1,.bottom_bar .btn-1 {
    font-size: 16px;
    letter-spacing: 1px;
    color: #f6efea;
    font-weight: bold;
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px
}

#intro {
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

#intro h1 {
    color: #000;
    font-weight: 500;
    font-size: 150px;
    letter-spacing: -6px;
    line-height: 150px;
    margin-bottom: 0px
}

#intro h1 span {
    color: #44449b
}

#intro h5 {
    color: #44449b
}

#intro p {
    color: #000;
    margin: 0 auto
}

#intro .btn-1 {
    margin: 5px 0 20px;
    font-size: 20px;
    letter-spacing: 1px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(135deg, #11abc1, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px
}

@media(max-width: 767px) {
    header {
        position:static
    }

    .navbar #button {
        padding: 8px 20px
    }

    .navbar .navbar-brand img {
        height: 40px
    }

    #intro {
        height: auto
    }

    #intro span {
        font-size: 65px
    }

    #intro h1 {
        font-size: 65px;
        letter-spacing: normal;
        line-height: 65px;
        margin-bottom: 10px
    }

    #intro p {
        width: 100%
    }
}

main #info {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;

}

main #info .card {
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center
}

main #info .card1 {
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px;
    padding: 24px;
    display: flex;
    flex-direction: row;
    align-items: center
}

main #info h2 {
    font-size: 48px;
    font-weight: 500;
    color: #fff
}

main #info h2 span {
    color: #44449b
}

main #info .img-container {
    padding: 20px
}

main #info .img-container img {
    max-width: 120px;
    object-fit: contain;
    filter: invert(1)
}

main #info h5 {
    color: #fff;
    font-weight: bold;
    font-size: 35px
}

main #info p {
    color: #fff;
    text-align: left;
}

main #banking {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;
}

main #banking h2 {
    font-weight: 500;
    font-size: 35px;
    color: #000;
    text-align: center
}

main #banking h2 span {
    color: #44449b
}

main #banking img {
    max-width: 100%;
    width: 700px
}

main #banking h5 {
    color: #fff;
    font-weight: bold;
    font-size: 35px
}

main #banking p {
    text-align: center;
    color: #000
}

main #about,main #usecase {
    background: #fff
}

main #about h2,main #usecase h2 {
    font-size: 48px;
    font-weight: 500;
    color: #44449b
}

main #about p,main #usecase p {
    text-align: left;
    color: #000000
}

main #about img,main #usecase img {
    max-width: 80%
}

main #services {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;
}

main #services h2 {
    font-size: 48px;
    font-weight: 500;
    color: #000
}

main #services p {
    color: #000
}

main #services .card {
    background: none;
    box-shadow: none;
    text-align: center;
    border: none
}

main #services .card img {
    max-width: 80%;
    margin: 0 auto;
    border-radius: 25px
}

main #services .card .img-container {
    width: 120px;
    height: 120px;
    margin: 0 auto
}

main #services .card .img-container img {
    max-width: 120px;
    border-radius: 0px
}

main #services .card .card-body h5 {
    color: #000;
    font-weight: bold;
    font-size: 35px
}

main #services .card .card-body h5 span {
    color: #44449b
}

main #services .card .card-body p {
    color: #000
}

main #services .card .card-body .btn-1 {
    letter-spacing: 1px;
    color: #000;
    font-weight: bold;
    background: linear-gradient(135deg, #11abc1, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px;
    margin-top: 20px
}

main #cta {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;
}

main #cta .icon_item {
    border: 2px solid rgba(108,108,216,.75);
    background: #fff;
    border-radius: 7px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .2s ease;
    padding: 24px;
    max-height: 150px;
    min-height: px
}

main #cta .icon_item h6 {
    font-size: 1.3rem;
    line-height: 1.571;
    font-weight: bold;
    color: #44449b;
    margin-bottom: 0px
}

main #cta .icon_item img {
    max-width: 48px;
    max-height: 48px;
    width: 100%;
    margin: 0;
    object-fit: contain
}

main #cta .icon_item:hover {
    border: 2px solid #44449b;
    box-shadow: 5px 5px 0 rgba(68,68,155,.4)
}

main #cta .card {
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px;
    text-align: center;
    padding: 20px 10px
}

main #cta .card-body h2 {
    font-size: 48px;
    font-weight: 500;
    color: #44449b
}

main #cta .card-body h2 span {
    color: #fff
}

main #cta .card-body img {
    max-width: 100px;
}

main #cta .card-a img {
    max-width: 90%;
}

main #cta .card-body h5 {
    color: #fff;
    font-weight: bold;
    font-size: 35px
}

main #cta .card-body p {
    color: #fff;
    width: 100%;
    margin: 0 auto
}

main #cta1 {
    background: #ffffff;
    border-radius: 20px;
    margin: 1%;
}

main #cta1 .icon_item {
    border: 2px solid rgba(108,108,216,.75);
    background: #fff;
    border-radius: 7px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all .2s ease;
    padding: 24px;
    max-height: 150px;
    min-height: px
}

main #cta1 .icon_item img {
    max-width: 48px;
    max-height: 48px;
    width: 100%;
    margin: 0;
    object-fit: contain
}

main #cta1 .icon_item:hover {
    border: 2px solid #44449b;
    box-shadow: 5px 5px 0 rgba(68,68,155,.4)
}

main #cta1 .card {
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 20px;
    text-align: center;
    padding: 1% 1%
}

main #cta1 .card-a img {
    max-width: 98%;
    margin-top: 1%;
    margin-bottom: 1%;
}

main #rewards {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;
}

main #rewards h2 {
    font-size: 48px;
    font-weight: 500;
    color: #000
}

main #rewards h2 span {
    color: #44449b
}

main #rewards p {
    color: #000;
    text-align: left;
}

main #rewards img {
    max-width: 100%
}

main #news h2 {
    font-size: 48px;
    font-weight: 500;
    color: #000
}

main #news h2 span {
    color: #44449b
}

main #news a {
    text-decoration: none
}

main #news a h5 {
    color: #44449b;
    text-align: center;
    margin-top: 10px
}

main #news .btn-1 {
    text-align: center;
    color: #000;
    font-size: 12px !important;
    border: 1px solid #44449b;
    margin: 0 auto;
    padding: 5px 10px;
    letter-spacing: 1px;
    border-radius: 15px
}

main #news img {
    height: 164px;
    object-fit: cover
}

main #founder {
    background: #ebf5ff;
    border-radius: 20px;
    margin-left: 1%;
    margin-right: 1%;
    text-align: center;
    
}

main #founder h2 {
    font-size: 48px;
    font-weight: 500;
    color: #000
}

main #founder h2 span {
    color: #44449b
}

main #founder p {
    color: #000;
    font-size: 28px !important;
    font-weight: 500
}

main #founder h5 {
    font-weight: 600;
    font-size: 16px
}

main #contact {
    background: #fff
}

main #contact h2 {
    font-size: 48px;
    font-weight: 500;
    color: #000
}

main #contact h2 span {
    color: #44449b
}

main #contact p {
    color: #000
}

main #contact .card {
    background: linear-gradient(135deg, #44449b, #74cfc0, #c70bf9);
    box-shadow: 0 3px 32px rgba(116,207,192,.54);
    transition: box-shadow .4s,background-color .4s;
    border-radius: 15px
}

main #contact form .btn-1 {
    letter-spacing: 1px;
    color: #fff;
    font-weight: bold;
    background: #44449b;
    border-radius: 15px;
    margin-bottom: 0px
}

footer {
    background-image: url(/images/footer_bg.png);
    background-position: left 85%;
    background-size: cover;
    max-width: 100%;
    /*background: linear-gradient(152deg, #44449b, #bd3737);
    color: #fff;*/
}

footer h5 {
    font-weight: bold;
    color: #74cfc0
}

footer a {
    color: #fff
}

@media (min-width: 768px) {
    footer {
      padding: 20px 0;
    }
  }
  
  @media (min-width: 992px) {
    footer .nav-wrapper {
      margin-bottom: 20px;
    }
  }

.center {
    border-radius: 20px;
    margin-left: 20%;
    margin-right: 20%;
    max-width: 80%;
  }

@media(max-width: 767px) {
    #info .card {
        flex-direction:column !important
    }

    #about img {
        max-width: 100% !important
    }

    #contact h2 {
        font-size: 45px !important
    }

    .icon_item {
        padding: 15px !important
    }

    .icon_item h6 {
        font-size: 1rem !important
    }

    .picture {
        max-width: 80%;

}
}