@font-face {
    font-family: 'ClashDisplay';
    src: 
        url('../fonts/ClashDisplay-Variable.woff2') format('woff2'),
        url('../fonts/ClashDisplay-Variable.woff') format('woff'),
        url('../fonts/ClashDisplay-Variable.ttf') format('truetype');
        font-weight: 200 700;
        font-display: swap;
        font-style: normal;
}
@font-face {
    font-family: 'ClashGrotesk';
    src: 
        url('../fonts/ClashGrotesk-Variable.woff2') format('woff2'),
        url('../fonts/ClashGrotesk-Variable.woff') format('woff'),
        url('../fonts/ClashGrotesk-Variable.ttf') format('truetype')
    ;   
    font-weight: 200 700;
    font-display: swap;
    font-style: normal;
}  
.term-body {
    width: 849px;
      margin-top: 84px;
    font-family: "ClashDisplay";
    font-style: normal;
    line-height: 24px;
    color: #1c2c40;
}
.term-footer {
    background-color: #0c388f !important;
    font-family: 'ClashGrotesk';
    margin-top: 84px;
}
  
.first-col{
      margin-top:96px ;
      color: #ffffff;
}


.footer-logo{
      margin-bottom: 28px;
}
.betastack{
      margin-top: 60px;
      margin-bottom: 73px;
}
.second-col{
      margin-top: 96px;
      color: #ffffff;}
.third-col{
      margin-top: 96px;
      color: #ffffff;
}
.row>*{
        width: 100%;
}

nav {
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;

    letter-spacing: -0.331034px;
    z-index: 99;
}
.btn-login{
    background: #1E87FF;
    border-radius: 8px;
}
/* .btn-login span{
    padding: 50% 50% 50% 50% !important;
} */
.close{
    display: none;
}
.tablet-logo{
    display: none;
}
.frame-4 {
    padding-left: 34px;
    padding-right: 87px;
    padding-top: 31px !important;
    /* background-color: #0C388F; */
}
.tablet-view {
    display: none;
}
.web-view{
    position: absolute;
    top: 88px;

    z-index: 99;
}
.nav-list li {
    padding-right: 50px;
}
.zainmoni-logo-mobile{
    display: none;
}
.btn-small {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 8px;

    width: 94px;
    height: 50px;
    left: 1105px;
    top: 26px;

    background: #1e87ff;
    border-radius: 8px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
}
.btn-more {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 8px;

    width: 124px;
    height: 50px;
    background: #1e87ff;
    border-radius: 6px;
    flex: none;
    order: 0;
    flex-grow: 0;
}
.btn-demo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 8px;
    width: 124px;
    height: 50px;
    background: transparent;
    border: none;
    border-radius: 6px;
    flex: none;
    order: 0;
    flex-grow: 0;
}
/* .trusted-logos{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
} */

.trusted-logos img{
    width: 130px;
    height: 75px;
    object-fit: contain;

}

.trusted-logos{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0px, 1fr));
    grid-gap: 1rem;
}

.bello-kano-logo{
    -webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
.group53 {
    position: absolute;
    /* width: 151px; */
    height: 95px;
    left: 38px;
    top: 505px;
}
.trusted {
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 24px;
}
.image7-box {
    display: grid;    
}
.image-7 {
    margin-left: 30px;
    width: 58px;
    height: 58px;
    left: 153px;
    top: 516px;
    border-radius: 255px;
}
.image7-title {
    margin-left: 30px !important;
    font-family: "ClashDisplay" !important;
    font-style: normal;
    font-weight: 500 !important;
    font-size: 10px !important;
    line-height: 13px;
    text-align: center;
}
.bg-header {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 720px;
    left: 0px;
    background-repeat: no-repeat;
    background: #0D3484;
}

.header {
    position: absolute;
    top: 0px;
}
.frame-1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 28px;

    position: absolute;
    width: 515px;
    height: 280px;
    left: 69px;
    top: 198px;
}
.frame-1 span {
    width: 418px;
    height: 72px;

    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.frame-1 .title {
    width: 515px;
    height: 102px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 50px;
    color: #ffffff;
    flex: none;
    order: 0;
    flex-grow: 0;
}
.img-header {
    height: 600px;
    right: 0px;
}
.bg-body{
    position: absolute;
    width: 100%;
    height: 1622.54px;
    left: 0px;
    top: 1448px;

}
.img-body {
    position: absolute;
    left: 106px;
    top: 1005px;
    width: 324px;
    height: 520px;
}
.title {
    font-family: "CLashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 46px;
    line-height: 50px;
}
.grow {
    display: flex;
    align-items: center;
    padding: 0px;
    gap: 26px;

    position: absolute;
    width: 674px;
    height: 138px;
    top: 831px;
}
.grow-head {
    width: 599px;
    height: 40px;

    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;

    text-align: center;

    color: #1c2c40;

    flex: none;
    order: 0;
    flex-grow: 0;
}
.grow-content {
    width: 674px;
    height: 72px;
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    color: #1c2c40;
    flex: none;
    order: 1;
    flex-grow: 0;
}
.grow-image {
    position: absolute;
    width: 1042px;
    height: 859px;
    top: 1030px;
}
.agents {
    position: absolute;
    width: 1280px !important;
    height: 1654px;
    left: 153px;
    top: 2028px;

}
.features{
    position: absolute;
    top: 1905px;
}
.feature-header{
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    margin-bottom: 50px;
}
.feature-head{
    width: 407px;
    height: 52px;
    margin-top: 50px !important;

    font-family: 'ClashDisplay';
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
}
.feature-title{
    width: 398px !important;
    height: 74px;

    font-family: 'ClashGrotesk';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}
.head-agents {
    position: absolute;
    /* width: 600px !important;
    height: 80px; */
    top: 1905px;
    /* font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px; */
}
.frame-15 {
    margin-top: 550px;
}
.frame-15 .sub-head {
    width: 407px;
    height: 52px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
}
.frame-15 .sub-title {
    width: 414px;
    height: 48px;
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
}
.agents-pic {
    position: absolute;
    width: 508px !important;
    height: 456px;
    left: 698px;
    top: 2000px;
}
.pill-img{
    width: 486px;
    height: 431px;
    left: 698px;
    top: 2035px;

}

.agents-pic img {
    width: 486px;
    height: 431px;
    margin-left: 260px;
}
.rectangle-47 {
    width: 294px !important;
    height: 264px !important;
  }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: #0C388F !important;
    color: white !important;
  }
  .nav-link {
    color: white !important;
  }
  .payment-section{  
    border-left: solid 1px #f4f4f4 !important;
  }
  .merchant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 519px;
    height: 84px;
    top: 2704px;
    position: absolute;
  }
  
  .p17 {
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    order: 0;
    flex-grow: 0;
  }
  .merchant span {
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }
  .group-7094 {
    display: none;
  }
  .group-7094 {
    display: none;
  }
  .agents {
    position: absolute;
    width: 1280px !important;
    height: 1654px;
    left: 0px;
    top: 1805px;
    margin-top: 70px;
  }
  
  .head-agents {
    position: absolute;
    width: 600px !important;
    height: 80px;
    left: 121px;
    top: 1905px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    /* text-align: center; */
  }
  .frame-15 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    /* gap: 24px; */
    position: absolute;
    width: 433px;
    /* height: 488px; */
    left: 153px;
    top: -350px;
  }
  .mobile-features {
    display: none;
  }
  .frame-15 .sub-head {
    width: 407px;
    height: 52px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 26px;
  }
  .frame-15 .sub-title {
    width: 414px;
    height: 38px;
    margin-bottom: 24px;
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
  }
  .agents-pic {
    position: absolute;
    width: 508px !important;
    height: 456px;
    left: 698px;
    top: 155px;
  } 
  .line {
    position: absolute;
    height: 0px;
    left: 126px;
    top: 2028px;
  }
  .merchant {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0px;
    gap: 20px;
    width: 519px;
    height: 84px;
    top: 2704px;
    position: absolute;
  }
  .merchant span {
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
  }
  
  .client-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* padding: 0px; */
    top: 2857px;
    position: absolute;
    left: -30%;
    width: 500 !important;
  }
  .client010 {
    box-sizing: border-box;
    position: absolute;
    width: 509px;
    height: 391px;
    left: 0px;
    background: #f3f5f6;
    border: 1px solid #1c2c40;
    border-radius: 12px;
  }
  .client010-head .qoute {
    width: 392px;
    height: 40px;
    left: 44px;
    top: 74px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 66px;
    line-height: 40px;
    color: #1e4eae;
  }
  .client010-head .p {
    position: absolute;
    width: 392px;
    height: 40px;
    left: 44px;
    top: 74px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
  }
  .content010 {
    position: absolute;
    width: 356px;
    height: 96px;
    left: 82px;
    top: 140px;
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1c2c40;
  }
  .client010-profile {
    position: absolute;
    width: 300px;
    height: 72px;
    left: 83px;
    top: 251px;
  }
  .client010-img {
    width: 72px;
    height: 72px;
    left: 83px;
    top: 251px;
    background: url(.jpg);
    /* border-radius: 70.5px; */
  }
  .client010-name {
    position: absolute;
    width: 176px;
    height: 40px;
    left: 80px;
    top: 251px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 40px;
    color: #1e4eae;
  }
  .client010-title {
    position: absolute;
    width: 77px;
    height: 40px;
    left: 80px;
    top: 276px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    color: #1c2c40;
  }
  .client011 {
    box-sizing: border-box;
    position: absolute;
    width: 509px;
    height: 391px;
    left: 15px;
    top: 17px;
    background: #ffffff;
    border: 1px solid #1c2c40;
    border-radius: 12px;
  }
  .client020 {
    box-sizing: border-box;
    position: absolute;
    width: 509px;
    height: 391px;
    left: 554px;
    top: 0px;
    background: #f3f5f6;
    border: 1px solid #1c2c40;
    border-radius: 12px;
  }
  .client020-head .qoute {
    width: 386px;
    height: 40px;
    left: 598px;
    top: 74px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 66px;
    line-height: 40px;
    color: #1e4eae;
  }
  .client020-head .p {
    position: absolute;
    width: 386px;
    height: 40px;
    left: 44px;
    top: 74px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 40px;
  }
  .content020 {
    position: absolute;
    width: 356px;
    height: 72px;
    left: 82px;
    top: 140px;
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #1c2c40;
  }
  .client020-profile {
    position: absolute;
    width: 300px;
    height: 72px;
    left: 83px;
    top: 251px;
  }
  .client020-name {
    position: absolute;
    height: 40px;
    left: 80px;
    top: 255px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 16px;
    line-height: 40px;
    color: #1e4eae;
  }
  .client020-title {
    position: absolute;
    width: 48px;
    height: 40px;
    left: 80px;
    top: 280px;
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 500;
    font-size: 16px;
    line-height: 40px;
    color: #1c2c40;
  }
  .client021 {
    box-sizing: border-box;
    position: absolute;
    width: 509px;
    height: 391px;
    left: 569px;
    top: 17px;
    background: #ffffff;
    border: 1px solid #1c2c40;
    border-radius: 12px;
  }
  
  .contact-us {
    position: absolute;
    width: 100%;
    height: 100%;
    /* left: px; */

    top: 3396px;
  }
  .contact p {
    /* position: absolute; */
    width: 412px;
    height: 88px;
    margin-left: 120px;

    font-family: 'ClashDisplay';
    font-style: normal;
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    color: #1C2C40;
  }
  .contact  span {
    font-family: "ClashGrotesk" !important;
    /* margin-left: 100px; */

}

.contact-title{
    margin-left: 120px;
}
.faqs {
    position: absolute;
    width: 509px;
    height: 506px;
    top: 40px;
}
.faqs button {
    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
    line-height: 24px;
    color: #1c2c40;
}
.faqs .accordion-body {
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #1c2c40;
}
.rectangle-40 {
    box-sizing: border-box;
    position: absolute;
    width: 897px;
    height: 365px;
    top: 4155px;
}
.footer {
    top: 4606px;
}
.footer-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 20px;

    position: absolute;
    width: 599px;
    height: 148px;
    top: 4218px;
}
.footer-box p {
    width: 599px;
    height: 80px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 32px;
    line-height: 40px;
    text-align: center;
}
.footer-box span {
    width: 523px;
    height: 48px;

    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
}
.footer-box-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 14px 22px;
    gap: 8px;

    width: 256px;
    height: 50px;
    left: 512px;
    top: 4398px;

    border: none;
    background: #1e87ff;
    border-radius: 8px;
}

.bg-footer{
    position: absolute;
    width: 100%;
    height: 521px;
    left: 0px;
    top: 4041px;
}
.frame-9 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 18px;

    position: absolute;
    width: 334px !important;
    height: 260px;
    left: 71px;
    top: 4156px;
}
.content-frame9 {
    width: 334px;
    height: 60px;

    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: #fcfdff;
}
.frame-9 .address {
    width: 187px;
    height: 42px;

    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.frame-9 .twitter {
    left: 0%;
    right: 0%;
    top: 1.83%;
    bottom: 1.84%;
    padding-left: 18px;
}
.cp-right {
    position: absolute;
    height: 20px;
    left: 68px;
    top: 4506px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
}
.frame-7 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 50px;

    position: absolute;
    width: 448px !important;
    height: 118px;
    left: 543px;
    top: 4164px;
}

.frame-7 ul {
    font-family: "ClashGrotesk";
    font-style: normal;
    font-weight: 400;
    font-size: 15px;
    line-height: 22px;
    list-style: none;
    color: white;
}
.frame-7 li {
    padding-bottom: 20px;
}
.frame-7 a{
    text-decoration: none;
    color: white;
}

.frame-5 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 10px;

    position: absolute;
    width: 132px;
    height: 54px;
    left: 970px;
    /* top: 4664px; */
}
.modal-title {
    width: 153px;
    height: 44px;
    left: 50px;
    top: 21px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 600;
    font-size: 28px;
    line-height: 44px;
    color: #1c2c40;
}
.modal-body label {
    height: 17px;
    left: 0px;
    top: 0px;

    font-family: "ClashDisplay";
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #010005;
}
.modal-body input {
    box-sizing: border-box;
    left: 0%;
    right: 0%;
    top: 33.72%;
    bottom: 0%;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}
.responsive-pills{
    display: none;
}
.modal-close{
    margin-top: -40px;
}

/* Tablet View  */
/* @media screen and (min-width:768px) { */
@media screen and (max-width: 768px) and (min-width: 601px) {
    .body {
        overflow-x: hidden;
    }
    .bg-header {
        position: absolute;
        width: 768px;
        height: 680px !important;
        left: 0px;
        top: -2px;

        background: #0D3484;
    }
    .bg-body {
        position: absolute;
        width: 100%;
        height: 1654px;
        left: 0px;
        top: 1236px;
        z-index: 0;

    }
    .bg-footer {
        position: absolute;
        width: 768px;
        height: 911px;
        left: 0px;
        top: 3929px;        

    }
    .group53{
        left: 0px !important;
        top: 450px !important;
    }
    nav {
        display: none;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: -0.331034px;
    }
    .tablet-logo{
        display: block;
    }
    .close{
        display: block;
    }
    .navbar{
        position: absolute;
        width: 768px;
        /* height: 514px; */
        left: 0px !important;
        right: 0px !important;
        top: 0px !important;

        background: #0D3484;
        z-index: 1;
    }
    .trusted-logo{
        flex: 1 0 100px;
        width: 100px !important;
        height: 28px;

    }
    .btn-small{
        display: none;
    }
    .web-view {
        display: none;
    }
    .tablet-view {
        display: block;
    }
    .tablet-view{
        position: absolute;
        top: 97px;
        
    }
    .tablet-img-header {
        width: 390px;
        height: 564.44px;
        left: -400px;
        top:  35px !important;
        z-index: 0 !important;
    }
    .header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 22px;

        position: absolute;
        width: 312px;
        height: 256px;
        left: 0px;
        top: 0px;
    }
    .frame-4 {
        background-color: #0D3484;

    }
    .navbar-collapse{
        position: relative;
        width: 100%;
        height: 514px !important;
        background: #0D3484;
        top: -100px;
        left: 5px;
    }
    .tablet-logo{
        display: block;
        position: absolute;
        width: 168px;
        height: 36px;
        left: 20px;
        top: 37px;
    }
    .nav-list{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 0px;
        gap: 26px;

        position: absolute;
        /* width: 72px; */
        height: 209px;
        left: 36px;
        top: 110px;
    }
    .nav-list li {
        padding-right: 20px;
    }
    .nav-login .btn{
        margin-top: 370px;
        margin-left: 36px;
        display: block;
    }
    .frame-1 {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 22px;

        position: absolute;
        width: 312px;
        height: 256px;
        left: 41px;
        top: 185px;
    }
    .frame-1 .title {
        width: 339px;
        height: 96px;

        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 38px;
        line-height: 47px;

        /* or 124% */

        color: #ffffff;

        /* Inside auto layout */
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    .frame-1 span {
        width: 318px;
        height: 66px;
        font-family: "ClashGrotesk";
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;
    }
    .trusted-logos img{
        width: 80px !important;
        height: 45px;
        flex: 0 0 50%;
    }
    .grow {
        flex-grow: 1;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 12px;

        position: absolute;
        width: 599px;
        height: 148px;
        left: 85px;
    }
    .grow-head {
        width: 599px;
        height: 40px;

        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 40px;
        text-align: center;
    }
    .grow-content {
        width: 467px;
        height: 96px;
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        text-align: center;
    }
    .grow-image {
        position: absolute;
        width: 693.23px;
        height: 571.48px;
        left: 26px;
    }
    .line {
        display: none;
    }

    .features{
        margin-top: -300px;
    }
    .feature-header{
        margin-top: 50px;
    }
    .feature-head{
        width: 407px !important;
        height: 52px !important;
        left: 500px;

        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        /* or 130% */

        text-align: center;

        color: #FFFFFF;


        /* Inside auto layout */

        flex: none;
        order: 0;
        flex-grow: 0;
    }
    .feature-title{
        width: 308px !important;
        height: 74px !important;

        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        /* or 150% */

        text-align: center;

        color: #FFFFFF;


        /* Inside auto layout */

        flex: none;
        order: 1;
        flex-grow: 0;
    }
    .carousel-inner{
       margin-left: 100px;
       width: 400px !important;
       
       /* margin: 0px !important; */
        /* padding: 0px !important; */
    }
    .carousel-item img{
        width: 508px !important;
        /* margin: 0px !important; */
        /* padding: 0px !important; */
    }
    /* .carousel-inner{
        justify-content: center;
        width: 10% !important;
    } */
    .payment-section{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 10px;
        color: #010005 !important;
        border-left: none !important;

    
        position: absolute;
        width: 407px;
        height: 136px;
        left: 169px;
        top: 0px;
    }    
    .pill-img{
        width: 608px !important;
        height: 456px !important;
        left: 119px !important;
        top: -170px !important;
        /* margin-bottom: 50px; */
    }
    .agents-pic {
        display: none;
    }
    .agents-pic img{
        margin-left: 0px;
    }
    .merchant {
        width: 407px;
        height: 52px;
        top: 2450px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;
        /* or 130% */

        text-align: center;

        color: #ffffff;
        margin-left: -500px;
    }
    
    .client-container {
        width: 324px;
        height: 850px;
        top: 2250px !important;
        left: 0 !important;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .client-card{
        margin-left: 300px !important;
    }
    .frame-15 {
        display: none;
    }
    .rectangle-40 {
        width: 711px;
        height: 391px;
    }
    .merchant {
        margin-left: 70px;
        /* justify-content: center; */
    }
    .head-agents {
        position: absolute;
        width: 599px;
        height: 80px;
        left: 84px;
        top: 1518px;

        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 40px;
        text-align: center;
    }
    .contact-us {
        position: absolute;
        width: 100%;
        height: 100%;
        left: -50px;
        top: 3396px;
    }
    .contact {
        position: absolute;
        width: 293px;
        height: 192px;
        left: 0px;
        top: 0px;
    }
    .contact p {
        width: 288px;
        height: 108px;
        margin-bottom: 30px;
        margin-left: 30px;
    }
    .contact-title {
        width: 293px;
        height: 72px;
        margin-top: 30px;
        margin-left: 30px;
    }
    .faqs {
        position: absolute;
        width: 356px;
        height: 582px;
        /* left: 368px; */
    }
    .frame-5{
        display: none;
    }
    .mobile-footer{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 77px;

        position: absolute;
        width: 249px;
        height: 726px;
        left: 38px;
        top: 0px;

    }
    .frame-7{
        position: absolute;
        left: 0px !important;
        width: 132px;

        top: 4150px;
        height: 380px;
        /* flex: none !important;
        order: 1;
        flex-grow: 0; */
        /* background-color: #1C2C40; */
    }
    .frame-9{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 0px;
        left: 0px;

        width: 214px;
        height: 726px;
        top: 4030px;
    }
    .footer-ul-1{
        position: absolute;
        left: -20px;
        top: 80px;
        width: 300px;
    }
    .footer-ul-2{
        position: absolute;
        left: -20px;
        top: 350px;

        width: 300px;
    }
    .tablet-ul-1 ul{
        width: 720px;
    }
    .carousel-item{
        width: 70% !important;
    }
    .carousel-inner{
        width: 70% !important;
    }
    .cp-right{
        height: 20px;

        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;

        top: 4800px;
        left: 35px;

        color: #FFFFFF;

        flex: none;
        order: 4;
        flex-grow: 0;
    }
}
/* Mobile View */
@media only screen and (max-width: 460px) {

    .navbar-toggler {
        position: absolute;
        width: 24px;
        height: 24px;
        left: 311px;
        top: 0px;

        border: none !important;
    }
    .navbar-toggler::after {
        border: none !important;
    }
    .bg-header{
        position: absolute;
        width: 100%;
        height: 585px;
        /* height: 585px; */
        /* left: 0px; */
        /* top: -5px; */
        top: -2px;
    }
    .bg-body{
        width: 100%;
        height: 1244px;
        left: 0px;
        top: 1023px;
    }
    .bg-footer{
        position: absolute;
        width: 100%;
        height: 863px;
        left: -1px;
        top: 3380px;

    }
    .web-view {
        display: none;
    }
    .tablet-view{
        display: none;
    }
    .frame-4 {
        /* position: absolute; */
        /* top: 30px; */
        z-index: 99;
    }
    .navbar-collapse{
        position: relative;
        width: 360px;
        height: 401px;
        top: -100px;
        padding-left: 30px;
        left: -10px;

        background: #0D3484;
    }
    .tablet-logo{
        display: block;
    }
    .close{
        display: block;
        position: absolute;
        top: 0px;
        right: 0px;
    }
    .nav-login .btn-small{
        display: block;
    }
    .navbar-nav{
        margin-top: 50px;
    }
    .zainmoni-logo{
        width: 166px;
        height: 36px;
        left: 19px;
    }

    .navbar-toggler{
        position: absolute;
        width: 24px;
        height: 24px;
        left: 311px;
        top: 43px;
    }
    .frame-1{
        position: absolute;
        width: 318px;
        height: 162px;
        top: 191px;
    }
    .frame-1 .title{
        width: 267px  !important;
        height: 78px;
        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 32px;
        line-height: 38px;
        text-align: center;

    }
    .frame-1 .frame1-content{
        width: 318px !important;
        height: 66px;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 22px;

        text-align: center;
    }
    .group53 .col-12{
        display: none;
    }
    .trusted-logos{
        display: none;
    }
    .trusted{
        display: none;
    }
    .image7-box{
        display: none;
    }
    .grow{
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0px;
        gap: 12px;

        position: absolute;
        width: 357px;
        height: 196px;
        top: 647px;
    
    }
    .grow-head{
        width: 599px;
        height: 40px;
        
        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 40px;
        
        text-align: center;
        
        color: #1C2C40;
        
        flex: none;
        order: 0;
        flex-grow: 0;
    }
    .grow-content{
        width: 292px;
        height: 144px;

        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        text-align: center;

        color: #1C2C40;

        flex: none;
        order: 1;
        flex-grow: 0;
    }
    .grow-image{
        position: absolute;
        width: 343px;
        height: 276px;
        top: 881px;
    }

    .line{
        display: none;
    }
    .frame-15 .sub-head{
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        position: absolute;
        width: 343px;
        height: 136px;
        left: 9px;
    }
    .merchant{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0px;
        gap: 12px;

        position: absolute;
        width: 300px;
        height: 108px;
        top: 1949px;
    }
    .merchant .p17{
        justify-content: center;
    }
    .faqs{
        /* display: none; */
        width: 400px;
        height: 630px;
        margin-top: 380px;
        margin-left: -250px;
    }

    .features{
        margin-top: -500px;
    }
    .feature-header{
        /* position: absolute; */
        width: 301px !important;
        height: 144px;
        margin-top: -200px;
        justify-content: center;
        
        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 28px;
        line-height: 36px;
        
        text-align: center;
        
        color: #FFFFFF;

    }

    .pill-img{
        width: 380px;
        height: 264px;
        left: 0px;
        top: -400px;
    }

    .agents-pic{
        display: none;
       
    }
    .tab-content{
        padding: 0px, 0px, 0px, 0px !important;
        width: 200px !important;
        margin: 0px, 200px, 0px, 0px !important;
    }
    .feature-head{
        display: block;
        margin-top: 100px;

        width: 343px !important;
        height: 500px !important;

        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 20px;
        line-height: 26px;

        text-align: center;

        color: #FFFFFF;
    }
    .feature-title{
        display: block;
        width: 343px;
        height: 200px !important;
        margin-top: -450px;

        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;

        text-align: center;

        color: #FFFFFF;
    }
    .agents{
    }
    .client-container{
        width: 200px;
        height: 521px;
        left: -170px;
        top: 1850px;
        left: 0 !important;
        overflow-x: scroll;
        overflow-y: hidden;
    }
    .client-view{
        position: absolute;
        width: 200px;
        height: 221px;
        left: 20px !important;
        top: 2100px !important;
    }
    .client-card{
        margin-left: 100px !important;
    }
    .horizontal-scrollable {
        overflow: auto;
    }
    .client010{
        width: 284px;
        height: 221px;
    }
    .client011{
        width: 284px;
        height: 221px;
    }
    .client010-name {
        position: absolute;
        width: 176px;
        height: 40px;
        left: 40px;
        top: 160px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 40px;
        color: #1e4eae;
    }
    .client010-title {
        position: absolute;
        width: 77px;
        height: 40px;
        left: 40px;
        top: 180px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        color: #1c2c40;
    }
    .client010-head .qoute {
        width: 392px;
        height: 40px;
        left: 24px;
        top: 54px !important;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 36px !important;
        line-height: 40px;
        color: #1e4eae;
    }
    .client010-head .p {
        position: absolute;
        width: 392px;
        height: 40px;
        left: 20px;
        top: 20px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 14px !important;
        line-height: 40px;
    }
    .client010-head p{
        position: absolute;
        width: 230px;
        height: 96px;
        left: 45px;
        top: 75px;
        font-family: "ClashGrotesk";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #1c2c40;
    }
    .client021{
        width: 284px;
        height: 221px;
    }
    
    .client020{
        width: 284px;
        height: 221px;
    }
    .client020-name {
        position: absolute;
        width: 176px;
        height: 40px;
        left: 40px;
        top: 160px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 18px;
        line-height: 40px;
        color: #1e4eae;
    }
    .client020-title {
        position: absolute;
        width: 77px;
        height: 40px;
        left: 40px;
        top: 180px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 40px;
        color: #1c2c40;
    }
    .client020-head .qoute {
        width: 392px;
        height: 40px;
        left: 24px;
        top: 54px !important;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 36px !important;
        line-height: 40px;
        color: #1e4eae;
    }
    .client020-head .p {
        position: absolute;
        width: 392px;
        height: 40px;
        left: 20px;
        top: 20px;
        font-family: "ClashDisplay";
        font-style: normal;
        font-weight: 600;
        font-size: 14px !important;
        line-height: 40px;
    }
    .client020-head p{
        position: absolute;
        width: 230px;
        height: 96px;
        left: 45px;
        top: 75px;
        font-family: "ClashGrotesk";
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 20px;
        color: #1c2c40;
    }

    .contact-us{
        position: absolute;
        width: 0px;
        height: 0px;
        left: 0px !important;
        top: 2392px !important;
    }

    .contact  p{
        justify-content: center;
        width: 288px;
        height: 108px;
        margin-left: -90px;
        margin-bottom: 50px;
    }
    .contact-title {
        width: 288px;
        height: 108px;
        margin-left: -90px;

    }
    .rectangle-40{
        position: absolute;
        width: 315px;
        height: 369px;
        left: 23px;
        top: 3416px;
    }
    .footer-box{
        position: absolute;
        width: 315px;
        height: 369px;
        left: 23px;

        /* top: 3416px; */
    }
    .footer-box p{
        width: 287px;
        height: 112px;

        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }
    .footer-box span{
        width: 241px;
        height: 60px;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;

        text-align: center;
        color: #FFFFFF;

    }
    .footer{
        /* display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 85px;

        position: absolute;
        background-color: red;
        width: 249px;
        height: 726px;
        left: -30px;
        top: -800px; */


    }
    .mobile-footer{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 0px;
        gap: 85px;

        position: absolute;
        width: 249px;
        height: 726px;
        left: -30px;
        top: -700px;

    }
    .frame-9{
        position: absolute !important;        
    }
    .frame-7{
        position: absolute !important;
        left: 40px !important;
        /* margin-top: 200px !important; */
        /* top: 0px; */
        top: 4400px !important;
        width: 232px !important;
        height: 264px;
    }
    .table-ul-2{
        position: absolute !important;
        width: 232px;
        top: 250px;
    }
    .cp-right{
        width: 349px;
        height: 20px;
        top: 4200px !important;

        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 20px;
        color: #FFFFFF;
        flex: none;
    }
}