/* ================================================ Common css ============================================== */


@font-face {
    font-family: 'basier-circle-bold';
    src: local('Basier Circle Circle Bold'), local('Basier-Circle-Circle-Bold'),
        url('../fonts/BasierCircle-Bold.woff2') format('woff2'),
        url('../fonts/BasierCircle-Bold.woff') format('woff'),
        url('../fonts/BasierCircle-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'basier-circle-medium';
    src: local('Basier Circle Circle Medium'), local('Basier-Circle-Circle-Medium'),
        url('../fonts/BasierCircle-Medium.woff2') format('woff2'),
        url('../fonts/BasierCircle-Medium.woff') format('woff'),
        url('../fonts/BasierCircle-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'basier-circle-regular';
    src: local('Basier Circle Circle Regular'), local('Basier-Circle-Circle-Regular'),
        url('../fonts/BasierCircle-Regular.woff2') format('woff2'),
        url('../fonts/BasierCircle-Regular.woff') format('woff'),
        url('../fonts/BasierCircle-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'basier-circle-semibold';
    src: local('Basier Circle Circle SemiBold'), local('Basier-Circle-Circle-SemiBold'),
        url('../fonts/BasierCircle-SemiBold.woff2') format('woff2'),
        url('../fonts/BasierCircle-SemiBold.woff') format('woff'),
        url('../fonts/BasierCircle-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}


/*================================================ Boilerplates Styles ==========================================*/


html {
    box-sizing: border-box;
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: inherit;

}

ul li {
    list-style: none;
}

:root {
    --black: #000000;
    --aqua: #ffed01;
    --light-aqua: rgba(0, 193, 151, 0.051);
    --white: #ffffff;
    --light-yellow: #FEF64B;
    --very-light-grey: #F9F9F9;
    --dark-grey: #6A6A6A;
    --light-grey: #DADADA;
    --dark-blue: #2F3131;
}

body {
    font-family: 'basier-circle-regular';
    letter-spacing: 0.5px;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

h1 {
    font-size: 64px;
    font-family: 'basier-circle-semibold';
    text-transform: capitalize;
    color: var(--black);
    line-height: 1.1;
}

h2 {
    font-family: 'basier-circle-semibold';
    font-size: 65px;
    color: var(--black);
    line-height: 1.1;
}


h3 {
    font-family: 'basier-circle-semibold';
    font-size: 36px;
    color: var(--black);
    line-height: 1.1;
}



h4 {
    font-family: basier-circle-regular;
}


a {
    text-decoration: none;
}

p {
    font-family: 'basier-circle-regular';
    color: var(--dark-blue);
}


/*------------------------------- Some Css Classes ---------------------------*/
.aqua {
    color: var(--aqua);
}

/*------------------- Button Styles ---------------*/


.common-btn-wrapper .btn-primary {
    border: 2px solid var(--black);
    text-decoration: none;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    background-color: #fff300;
/*    box-shadow: 6px 6px 2px 1px var(--aqua);*/
    transition: all .4s;
    position: relative;

}

.common-btn-wrapper .btn-primary:hover,
.common-btn-wrapper .btn-primary:active {
    box-shadow: 0 0px 0 var(--white);
    /*transform: translateX(10px) translateY(5px);*/
    background-color: var(--black);
    transition: all .4s;

}

.common-btn-wrapper {
    position: relative;
}



.common-btn-wrapper .btn-primary span {
    color: var(--black);
    font-size: 18px;
    font-family: 'basier-circle-medium';
    line-height: 22px;
}

.common-btn-wrapper .btn-primary:hover span {
    color: var(--white);
    transition: all ease-in-out .4s;
}

.common-btn-wrapper .btn-primary img {
    width: 50px;
    position: relative;
}


/*========================== Header part ================== */


header {
    transition: all 0.5s;
    z-index: 997;
}

header.header-scrolled {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}

.branding-bar {
    background-color: var(--aqua);
    padding: 12px;
}



.top-heading {
    font-size: 18px;
    color: var(--white);
    margin-bottom: 0;
    font-family: 'basier-circle-medium';
}

.slick.topbar-branding-marque .slick-slide .inner {
    display: flex;
    align-items: center;
}

.slick.topbar-branding-marque .slick-slide .inner img {
    margin-left: 10px;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 120px;
    background-color: var(--white);
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header-logo span {
    color: var(--aqua);
}

.header-cta .common-btn-wrapper .btn-primary {
    background-color: var(--aqua);
    border: none;
    box-shadow: 6px 6px 2px 1px var(--light-yellow);
}

.header-cta .common-btn-wrapper .btn-primary span {
    color: var(--white);
}



.header-cta .common-btn-wrapper .btn-primary:hover {
    background-color: var(--black);
    box-shadow: 0 0px 0 var(--white);
}

.right-navigation {
    display: flex;
    align-items: center;
}

.right-navigation .nav-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 60px;
    margin-bottom: 0;
}

.right-navigation .nav-list li {
    margin-right: 50px;
}

.right-navigation .nav-list li:last-child {
    margin-right: 0;
}

.right-navigation .nav-list li a {
    font-family: 'basier-circle-regular';
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: right;
    color: var(--black);
    transition: all ease-in .3s;
}

.right-navigation .nav-list li a:hover {
    color: var(--aqua);
}

.right-navigation .app-store-btns a img {
    width: 24px;
   /* width: 130px;*/
}

.right-navigation .app-store-btns a:first-child {
    margin-right: 30px;
}

.mobile-navigation {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--black);
    clip-path: circle(0 at calc(100% - 5vw - 30px) calc(5vh + 30px));
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.mobile-navigation.active {
    clip-path: circle(100% at 175px 50vh);
}

.nav__link {
    display: block;
    font-size: 30px;
    text-transform: capitalize;
    padding: 1vh 5vw;
    color: var(--white);
    text-decoration: none;
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
    opacity: 0;
    transform: translateY(50%);
    text-align: center;
}

.nav__link:nth-child(1) {
    transition-delay: 0.05s;
}

.nav__link:nth-child(2) {
    transition-delay: 0.1s;
}

.nav__link:nth-child(3) {
    transition-delay: 0.15s;
}

.nav__link:nth-child(4) {
    transition-delay: 0.2s;
}

.nav__link.active {
    opacity: 1;
    transform: translateY(0);
}

.hamburger {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    position: fixed;
    z-index: 10;
    top: 10vh;
    right: 5vw;
    z-index: 10;
    background: var(--black);
}

.hamburger__patty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 2px;
    width: 50%;
    background-clip: padding-box;
    background: var(--white);
    transition: all 0.8s cubic-bezier(0.86, 0, 0.07, 1);
}

.hamburger__patty:nth-child(1) {
    transform: translate(-50%, calc(-50% - 8px));
}

.hamburger__patty:last-child {
    transform: translate(-50%, calc(-50% + 8px));
}

.hamburger.active .hamburger__patty {
    background: var(--white);
}

.hamburger.active .hamburger__patty:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.active .hamburger__patty:nth-child(2) {
    opacity: 0;
}

.hamburger.active .hamburger__patty:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/*============= Main section ====================== */
main {
    margin-top: 130px;
}

video {
    height: 100%;
    width: 100%;
}

/*------------- Repayment section --------- */
.repayments h1 {
    font-family: 'basier-circle-semibold';
    color: var(--black);
    text-transform: capitalize;
}

.repayment-description {
    font-size: 30px;
    line-height: 1;
    margin-bottom: 0;
    color: var(--black);
    letter-spacing: 0.125px;
}

.repayments .tlt {
    font-size: 30px;
    color: var(--aqua);
    display: inline-block;
    margin-bottom: 0;
    line-height: 1;
    font-family: 'basier-circle-semibold';
    letter-spacing: 0.125px;
}

.easy-repayment-section {
    padding: 100px 120px;
    position: relative;
}



.banner-video-wrapper {
    margin-left: 0;
    height: 700px;
}


.banner-video-wrapper video {
    height: 100%;

}


.repayment-content {
    display: flex;
    align-items: center;
    position: relative;
}

.repayment-content img {
    position: inherit;
}


.layer:nth-child(1) img {
    top: 10%;
    left: 0;
}

.layer:nth-child(2) img {
    top: 0px;
    right: 25%;
}

.layer:nth-child(3) img {
    right: 0;
    bottom: 40%;
}

.layer:nth-child(4) img {
    left: 45%;
    bottom: 15%;
}

.repayment-content .repayment-btn-wrapper img {
    width: 50px;
    position: relative;
    top: unset;
    right: unset;
}

.repayment-section1 {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 20px;
}

.repayments p {
    font-size: 20px;
}



/* ------------------ Rewards section ------------------- */
.rewards {
    padding: 100px 120px;
    background-color: rgb(255 243 0 / 4%);
}



.rewards-video-wrapper {
    height: 700px;
}

.rewards .row {
    margin-bottom: 140px;
}


.reward-txt,
.multiple-card-txt,
.credit-report-txt,
.due-date-txt-wrapper {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    gap: 20px;
}

.reward-txt p,
.multiple-card-txt p {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
}

.credit-report-txt p,
.due-date-txt p,
.bank-grade-txt p {
    font-size: 20px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0em;
    text-align: left;
}

.reward-txt>div {
    display: flex;
    align-items: center;
}

.reward-txt>div>div span {
    color: var(--aqua);
    font-size: 20px;
    font-family: 'basier-circle-medium';
}

.reward-txt>div>div img {
    margin-left: 3px;
    margin-right: 8px;
}

.reward-txt .common-btn-wrapper span {
    color: var(--black);
}

.brands-logo-marquee {
    background-color: var(--white);
    padding: 0 50px;
    border-radius: 30px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.brands-logo {
    top: -140px;
    position: absolute;
    left: 120px;
    right: 120px;
}

.brands-logo img {
    width: 100%;
    height: 170px;
}

.slick-slide .inner {
    margin: 0 15px;
}

.brands-logo .slick-slider {
    width: 100%;
}

.cheq-chip {
    height: 20px;
}




/* ------------------ Multiple cards section ------------------- */

.brands-logo h4 {
    font-family: "basier-circle-medium";
    font-size: 22px;
    line-height: 1.3;
    letter-spacing: 0px;
    text-align: left;
    margin-bottom: 30px;

}

.multiple-cards {
    padding: 100px 120px;
    background-size: cover;
    background-repeat: no-repeat;
}

.multiple-card-txt h2 {
    text-transform: capitalize;
}

.multiple-cards .row {
    margin-top: 80px;
}


/* ------------------ Credit Report section ------------------- */
.credit-report {
    background-image: url("../images/credit-report-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    padding: 100px 120px;

}



/* ------------------ Due date section ------------------- */
.due-date {
    padding: 100px 120px;
}




.due-date-txt h2 span {
    color: var(--aqua);
}

.due-date-inner {
    position: relative;
    height: 700px;
}

.due-date-txt h6 {
    font-family: 'basier-circle-regular';
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0.235em;
    text-align: left;
    color: var(--aqua);
    text-transform: uppercase;
}


/* ------------------ Bank Grade section ------------------- */
.bank-grade {
    padding: 100px 120px;
    background-color: var(--light-aqua);
    position: relative;
}

.bank-grade-txt {
    position: relative;
    margin-bottom: 35px;
}


.bank-grade .rotating-slider {
    position: absolute;
    top: 50px;
    left: 50px;
    z-index: -1;
    width: 140px;
}

.bank-grade-txt h2 {
    margin-bottom: 35px;
}

.bank-grade-img {
    position: absolute;
    right: -15px;
    bottom: 0;
    width: 47%;
    z-index: 1;
}

.bank-grade-img img {
    width: 100%;
    z-index: -9;
    position: relative;
}


.bank-grade .rotating-slider {
    -webkit-animation: spin 30s linear infinite;
    animation: spin 30s linear infinite;
}

.partners .partner {
    padding: 30px;
    border-radius: 20px;
}


.partners .partner:nth-child(1) {
    margin-bottom: 40px;
    background-color: var(--aqua);
}

.partners .partner:nth-child(2) {
    background-color: var(--white);

}

.partners h4 {
    font-family: 'basier-circle-regular';
    font-size: 16px;
    line-height: 22px;
    letter-spacing: 0em;
    text-align: left;
    color: #50505099;
    margin-bottom: 30px;
}

.partner-images {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.partner-images .security-vector {
    width: 80px;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*------------------------- Footer ------------------------ */
footer {
    padding: 100px 120px;
    position: relative;
    margin: 0 auto;
    z-index: 99;
}

.app-store-btns {
    display: flex;
    flex-direction: column;
    margin: 65px 0;
}

.app-store-btns .secondary-btn {
    border: none;
    outline: none;
    padding: 0;
    margin-bottom: 20px;
    align-self: flex-start;
}

.app-store-btns .secondary-btn:nth-child(2) {
    margin-bottom: 0;
}

.footer-social-btn,
.mobile-socials {
    display: flex;
    align-items: center;
    gap: 24px;
}

.footer-social-btn {
    margin-bottom: 45px;
}

.mobile-socials {
    margin-top: 60px;
    justify-content: center;

}


.footer-social-btn>div,
.mobile-socials>div {
    border: 1px solid #ffed01;
    background-color: #ffed01;
    color: black;
    border-radius: 20%;
    width: 24px;
    height: 24px;
    display: grid;
    place-content: center;
    cursor: pointer;
    transition: all ease-in .3s;
}

.mobile-socials>div {
    width: 32px;
    height: 32px;
}


.mobile-socials>div a {
    font-size: 20px;
}

.footer-social-btn>div a svg path,
.mobile-socials>div a svg path {
    fill: black;
    transition: all ease-in .3s;
}

.footer-social-btn>div:hover,
.mobile-socials>div:hover {
    background-color: var(--aqua);
    transition: all ease-in .3s;
}

.footer-social-btn>div:hover a svg path,
.mobile-socials>div:hover a svg path {
    fill: var(--black);
}

.footer-links {
    padding: 60px 0;
    border-top: 1px solid var(--light-grey);
    /*border-bottom: 1px solid var(--light-grey);*/
}

.footer-list {
    padding: 0;
}

.footer-list li a {
    font-family: "basier-circle-regular";
    color: var(--dark-grey);
    font-size: 18px;
    line-height: 45px;
    letter-spacing: 0em;
    text-align: left;
    cursor: pointer;
    transition: all ease-in .3s;
    position: relative;
}

.footer-list li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background: #fff;
    transition: .4s;
}

.footer-list li a:hover::after,
.footer-list li a.active-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50%;
    height: 1px;
    background: var(--aqua);
    transition: .4s;
    display: block;
}


.footer-list li a:hover {
    color: var(--aqua);
}

.investor-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 60px;
}

.our-investors {
    display: flex;
    align-items: center;
    gap: 30px;
}

.investor {
    padding: 20px;
    background: #FFFFFF;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    gap: 30px;

}


.features-wrapper {
    display: flex;
    align-items: center;
    gap: 30px;
    padding-bottom: 16px;
}

.our-features {
    display: flex;
    align-items: center;
    gap: 30px;
}


.features {
    padding: 16px;
    background: #FFFFFF;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    gap: 30px;

}



.featured {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px
    background: #FFFFFF;
    box-shadow: 0px 0px 13px rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    gap: 30px;
    align-items: center;

}

.copyright-notice p {
    font-family: 'basier-circle-regular';
    font-size: 14px;
    line-height: 17px;
    letter-spacing: 0em;
    text-align: left;
    color: #2F313173;

}

.investor-relation-wrapper h5 {
    font-family: 'basier-circle-semibold';
    font-size: 20px;
    line-height: 75px;
    letter-spacing: 0px;
    text-align: left;
    color: var(--black)
}


.investor-wrapper h6 {
    font-family: 'basier-circle-medium';
    font-size: 18px;
    line-height: 27px;
    letter-spacing: 0px;
    text-align: left;
    color: #131414;

}


/*----====Animation====----*/

.myparallax,
.layer,
.some-space,
.some-more-space {
    height: 100%;
    position: absolute;
    width: 100%;
}

.some-space {
    animation: rotate 18s 0.5s infinite linear reverse;
}

.some-more-space {
    -webkit-animation: rotate 15s 0.1s infinite linear;
    animation: rotate 15s 0.1s infinite linear;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
    }
}

@keyframes rotate {
    0% {
        -webkit-transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
        transform: rotateZ(0deg) translate3d(0, 1.5%, 0) rotateZ(0deg);
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 1.5%, 0) rotateZ(-360deg);
    }
}

/*----------------------------- Animsition Overlay Styles ---------------------------*/
.animsition-overlay-slide {
    background-color: var(--white);
}

.animsition-loading::after {
    border: none;
}


.active-link {
    color: var(--aqua) !important;
}

.animsition-loading {
    width: auto;
    height: auto;
}

.animsition-loading img {
    width: 150px
}

.big_dreams-title {
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    background: #fff300;
    margin-bottom: 34px;
    padding: 1px 16px;
    display: inline-block;
    clear: both;
    border: 2px solid var(--black);
    
    
}


.big_dreams-title:hover {
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    background: #fffff5;
    margin-bottom: 34px;
    padding: 1px 16px;
    display: inline-block;
    clear: both;
    border: 2px solid var(--black);
    
    
}



.big_dreams1-title {
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    background: #fff300;
    margin-bottom: 0px;
    padding: 1px 24px;
    display: inline-block;
    clear: both;
    border: 2px solid var(--black);
    
    
}


.big_dreams1-title:hover {
    text-align: center;
    margin: 0 auto;
    border-radius: 20px;
    background: #fffff5;
    margin-bottom: 0px;
    padding: 1px 24px;
    display: inline-block;
    clear: both;
    border: 2px solid var(--black);
    
    
}

.download-txtbox-btn a {
    text-decoration: none;
    background-color: #002970;
    border-radius: 35px;
    padding: 22px 44px;
    letter-spacing: .2px
}




/*Slider*/

/* Slider */

.slick-slide {
    margin: 0px 20px;
}

.slick-slide img {
    width: 100%;
}

.slick-slider
{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after
{
    display: table;
    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

/*Slider*/






/*Disable Text (Not COPY)*/

.prevent-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

/*Disable Text (Not COPY)*/



.float{
	position:fixed;
	width:60px;
	height:60px;
	bottom:24px;
	right:30px;
	background-color: #43be71;
	color:#FFF;
	border-radius:50px;
	text-align:center;
  font-size:30px;
	/* box-shadow: 2px 2px 3px #999; */
  z-index:100;
}

.my-float{
	margin-top:16px;
}