@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

* {
    padding:0;
    margin:0;
    box-sizing: border-box;
    list-style:none;
    
}
 html {
    font-family: 'Open Sans', sans-serif;
    
 }
 a {
    text-decoration:none;
 }
 a:hover {
    text-decoration:none;
    
 }
 .container {
     max-width:1150px;
     padding:0;
 }
/* --------------------------------- */




 /* HOME PAGE START */

 .header2 {
    min-height:664px;
    background-image:url('../images/homepage_hero_image.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    position:relative;
}
.header-cont2 {
    min-height:605px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:relative;
}
.header-cont2 h3 {
    font-size:24px;
    font-weight:600;
    line-height:90px;
    color:#7C2AF8;
    text-transform:uppercase;
    text-align:center;
    transform:translateY(45px);
    
}
.header-cont2 h1 {
    font-size:86px;
    font-weight:700;
    line-height:86px;
    color:#fff;
    text-align:center;
    max-width:664px;
    margin-bottom:30px;
}
.header-cont2 h4 {
    font-size:24px;
    line-height:32px;
    font-weight:600;
    color:#fff;
    max-width:801px;
    text-align:center;
    margin-bottom:30px;
}

.p-serve {
    padding:0px 0 100px 0;
}
.p-serve h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}
.line-2 {
    width:66px;
    height:2px;
    background-color:#7C2AF8;
    margin:20px 0;
    
}
.p-serve p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:885px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:20px;
}

.row-cards {
    padding-top:30px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
}
.row-card {
    width:180px;
    height:150px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
}
.row-card h3 {
    font-size:22px;
    font-weight:700;
    line-height:20px;
    color:#fff;
    max-width:160px;
    text-align:center;
}
.divide-line {
    width:47px;
    height:1px;
    background-color:#fff;
    margin:10px 0 6px 0;
}

.cc-1 {
    background-image:url('../images/WHO_WE_SERVE/1.png');
    background-size:cover;
    background-position:center;
}
.cc-2 {
    background-image:url('../images/WHO_WE_SERVE/2.png');
    background-size:cover;
    background-position:center;
}
.cc-3 {
    background-image:url('../images/WHO_WE_SERVE/3.png');
    background-size:cover;
    background-position:center;
}
.cc-4 {
    background-image:url('../images/WHO_WE_SERVE/4.png');
    background-size:cover;
    background-position:center;
}
.cc-5 {
    background-image:url('../images/WHO_WE_SERVE/5.png');
    background-size:cover;
    background-position:center;
}
.cc-6 {
    background-image:url('../images/WHO_WE_SERVE/6.png');
    background-size:cover;
    background-position:center;
}


.inovate  {
   display:flex;
   min-height:540px;
}
.ino-mob {
    width:100%;
    max-width:50%;
    background-image:url('../images/diagram_full_mobile.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
    display:none;
}
.ino-left {
    width:100%;
    max-width:50%;
    background-image:url('../images/diagram_full_desktop.png');
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}
.ino-right {
    width:100%;
    max-width:50%;
    display:flex;
    align-items: center;
}
.box {
    display:flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-left:47px;
}
.box h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color: #29282A;
}
.box p {
    font-size:18px;
    font-weight:600;
    line-height:26px;
    color:#495057;
}

.tools-2 {
    display:flex;
    margin-bottom:60px;
}
.t-text2 {
    width:45%;
    
}
.t-text2 h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color: #29282A;
    width:100%;
    text-align:start;
    margin-bottom:30px;
}
.t-text2 h3 {
    font-size:26px;
    font-weight:700;
    line-height:24px;
    color: #7C2AF8;
    width:100%;
    text-align:start;
}

.goal-list2 {
    display:flex;
    justify-content: space-around;
    width:100%;
    max-width:55%;
}

.list-gitem2 {
    max-width:50%;
}
.list-gitem2 li {
    display:inline-block;
    height:40px;
    margin-bottom:20px;
}
   
.div-one2 {
    display:flex;
    align-items: flex-start;
    min-width:304px;
    width:280px;
    min-height:40px;
    
    padding:7px;
    border-radius:28px;
}
.div-one2:hover {
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
    
}
.div-one2 h4 {
    
    font-weight:700;
    font-size:18px;
    line-height:26px;
    color: #495057;
    padding-left:23px;
    padding-right:5px;
    margin:0;
}
.div-one2:hover h4 {
    color:#fff;
}
.img {
    min-width:28px;
    height:28px;
    background-image:url('../images/check.svg');
}
.div-one2:hover .img {
    background-image:url('../images/check-w.svg');
}




 /* HOME PAGE END */

 



/*  SOLUTIONS PAGE START  */
 .header {
     min-height:664px;
     background-image:url('../images/solution\ hero.jpg');
     background-size:cover;
     background-position:center;
     background-repeat: no-repeat;
     position:relative;
 }
 .header-cont {
    min-height:605px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:relative;
}

 .mob-nav {
     display:none;
 }


 .nav {
     width:100%;
     min-height:59px;
     display:flex;
     justify-content: space-between;
     padding:0 70px;
     padding-top:36px;
     position:relative;
 }

.nav-btn {
    display:none;
    width:24px;
    height:8px;
    position:relative;
}
.short {
    width:18px;
    height:2px;
    background-color:#fff;
    position:absolute;
    top:0;
}
.long {
    width:24px;
    height:2px;
    background-color:#fff;
    position:absolute;
    bottom:0;
}

 .brand {
     width:168px;
     height:59px;
 }
 .brand img {
     width:100%;
 }
 .nav-list {
     display:flex;
     justify-content: center;
     align-items: center;
     width:100%;
     max-width:383px;
     margin-left:170px;
 }
 .nav-list li {
     margin:0 5px;
 }
 .nav-list li a {
     color:#fff;
     font-size:16px;
     font-weight:700;
     padding:5px 15px;
 }
 .nav-list li a.active-class {
    background: linear-gradient(
        90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
        border-radius: 28px;
 }

 .nav-list2 {
     display:flex;
     justify-content: center;
     align-items: center;
 }
 .nav-list2 li {
    margin:0 12px;
    width:162px;
    height:36px;
    border:1px solid #fff;
    border-radius:28px;
    padding-left:15px;
    display:flex;
    align-items: center;
    position:relative;
    transition: all ease-in-out 0.3s;
}
.nav-list2 li:hover {
    background-color: #4d00be;
}
.nav-list2 li::after {
    content:'>';
    width:12px;
    height:7;
    position:absolute;
    top:5%;
    right:10px;
    color:#fff;
    font-size:18px;
    font-weight:700;
}
.nav-list2 li a {
    color:#fff;
    font-size:16px;
    font-weight:700;
}

/* nav end */
.header-cont {
    min-height:605px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:relative;
}
.header-cont h3 {
    font-size:24px;
    font-weight:600;
    line-height:90px;
    color:#7C2AF8;
    text-transform:uppercase;
    text-align:center;
    position:absolute;
    top:78px;
}
.header-cont h1 {
    font-size:86px;
    font-weight:700;
    line-height:86px;
    color:#fff;
    text-align:center;
    max-width:664px;
    margin-bottom:30px;
}
.header-cont h4 {
    font-size:24px;
    line-height:32px;
    font-weight:600;
    color:#fff;
    max-width:550px;
    text-align:center;
    margin-bottom:30px;
}
.btn {
    width:100%;
    max-width:226px;
    height:45px;
    border-radius:28px;
    background: linear-gradient(270deg, rgba(85,29,171,1) 0%, rgba(124,42,248,1) 100%, rgba(85,29,171,1) 100%);
    font-size:16px;
    font-weight:700;
    color:#fff;
    position:relative;
}
.btn:hover {
    color:#fff;
}
.btn::after {
    content:'>';
    width:12px;
    height:7;
    position:absolute;
    top:15%;
    right:10px;
    color:#fff;
    font-size:18px;
    font-weight:700;
}
/* HEADER END */

.p-services {
    padding:0px 0 100px 0;
}
.p-services h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}
.line {
    width:66px;
    height:2px;
    background-color:#7C2AF8;
    margin:40px auto;
    
}
.parag {
    margin-bottom: 55px;
}
.parag p {
     font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:885px;
    margin: 0 auto;    
    margin-bottom:20px;
}

.p-services p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:885px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:20px;
}

.p-solutions p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:885px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:20px;
}

.grid-cards {
    padding-top:30px;
    display:grid;
    grid-template-columns: repeat(5, 1fr);
}
.card {
    width:210px;
    height:315px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
}
.card h3 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    max-width:160px;
    padding-bottom:20px;
    text-align:center;
}
.card p {
    font-size:16px;
    font-weight:600;
    line-height:20px;
    color:#fff;
    max-width:171px;
}
.c-1 {
    background-image:url('../images/PAYMENT_SERVICES/services\ 1.png');
    background-size:cover;
    background-position:center;
}
.c-2 {
    background-image:url('../images/PAYMENT_SERVICES/services\ 2.png');
    background-size:cover;
    background-position:center;
}
.c-3 {
    background-image:url('../images/PAYMENT_SERVICES/services\ 3.png');
    background-size:cover;
    background-position:center;
}
.c-4 {
    background-image:url('../images/PAYMENT_SERVICES/services\ 4.png');
    background-size:cover;
    background-position:center;
}
.c-5 {
    background-image:url('../images/PAYMENT_SERVICES/services\ 5.png');
    background-size:cover;
    background-position:center;
}

/* ----- */

.p-hq h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    padding-top: 25px;
}
.grid-text {
    display:grid;
    grid-template-columns: repeat(2,1fr);    
}
.text {
    width:100%;
    max-width:515px;
    min-height:336px;
    
}
.text p {
    font-size:16px;
    font-weight:700;
    line-height:24px;
    color: #495057;
}

/* --------- */

.p-solutions h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}

.grid-cards2 {
    padding-top:30px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);
    margin-bottom:117px;
}
.card2 {
    width:180px;
    height:315px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
}
.card2 h3 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    max-width:160px;
    padding-bottom:20px;
    text-align:center;
}
.card2 p {
    font-size:16px;
    font-weight:600;
    line-height:20px;
    color:#fff;
    max-width:160px;
    text-align:center;
}

.ca-1 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 1.png');
    background-size:cover;
    background-position:center;
}
.ca-2 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 2.png');
    background-size:cover;
    background-position:center;
}
.ca-3 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 3.png');
    background-size:cover;
    background-position:center;
}
.ca-4 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 4.png');
    background-size:cover;
    background-position:center;
}
.ca-5 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 5.png');
    background-size:cover;
    background-position:center;
}
.ca-6 {
    background-image:url('../images/PAYMENT_SOLUTIONS/solutions\ 6.png');
    background-size:cover;
    background-position:center;
}

/* -----  PAYMENTS INFO END  ------- */

.hosted-tools {
    min-height:1478px;
    background: linear-gradient(352deg, rgba(2,4,8,1) 0%, rgba(39,42,75,1) 100%, rgba(85,29,171,1) 100%);
    padding-top:54px;
}

.hosted-tools h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#fff;
    width:100%;
    max-width:388px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}
.hosted-tools h3 {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #fff;
    width:100%;
    margin: 0 auto;
    text-align:center;
    margin-bottom:60px;
}
.big-cards {
    display:grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
}
.big-card {
    width:100%;
    max-width:535px;
    min-height:424px;
    
}
.icon {
    width:70px;
    height:70px;
    margin:0 auto;
    margin-bottom:20px;
}
.icon img {
    width:100%;
}
.big-card h2 {
    font-size:30px;
    font-weight:700;
    line-height:60px;
    color:#7C2AF8;
    text-align:center;
    margin-bottom:30px;
}
.big-card p {
    font-size:16px;
    font-weight:600;
    line-height:24px;
    color:#fff;
}

/*   HOSTED TOOLS END   */

.complete {
    padding-top:80px;
}
.complete h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:1150px;
    margin:0 auto;
    text-align:center;
    margin-bottom:60px;
}

.grid-cards3 {
    padding-top:30px;
    display:grid;
    /* justify-content: center; */
    grid-template-columns: repeat(4, 1fr);
    margin-bottom:117px;
}
.card3 {
    
    width:268px;
    min-height:314px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    text-align:center;
}
.card3 h2 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    height:67px;
}
.card3 p {
    font-size:16px;
    font-weight:600;
    line-height:20px;
    color:#fff;
    max-width:230px;
}
.crd1 {
    background-image:url('../images/OMNI_CHANNEL/omni\ 1.png');
    background-position:center;
    background-size:cover;
}
.crd2 {
    background-image:url('../images/OMNI_CHANNEL/omni\ 2.png');
    background-position:center;
    background-size:cover;
}
.crd3 {
    background-image:url('../images/OMNI_CHANNEL/omni\ 3.png');
    background-position:center;
    background-size:cover;
}
.crd4 {
    background-image:url('../images/OMNI_CHANNEL/omni\ 4.png');
    background-position:center;
    background-size:cover;
}

/* ------ */

.tools {
    display:flex;
    
}
.t-text {
    width:45%;
    
}
.t-text h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color: #29282A;
    width:100%;
    text-align:start!important;
}

.goal-list {
    display:flex;
    justify-content: space-around;
    width:100%;
    max-width:55%;
}

.list-gitem {
    max-width:50%;
}
.list-gitem li {
    display:inline-block;
    height:40px;
    margin-bottom:20px;
}
   
.div-one {
    display:flex;
    align-items: flex-start;
    min-width:304px;
    max-width:auto;
    min-height:40px;
    margin:10px 0;
    padding:7px;
    border-radius:28px;
}
.div-one:hover {
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
    
}
.div-one h4 {
    
    font-weight:700;
    font-size:18px;
    line-height:22px;
    color: #495057;
    padding-left:21px;
    padding-right:10px;
    margin:0;
}
.div-one:hover h4 {
    color:#fff;
}
.img {
    min-width:28px;
    height:28px;
    background-image:url('../images/check.svg');
}
.div-one:hover .img {
    background-image:url('../images/check-w.svg');
}

/* -------- */

.developers {
    min-height:650px;
    width:100%;
    display:flex;
    justify-content: center;
    align-items: center;
}

.integration {
    display:flex;
    border-radius:20px;
    width:100%;
    max-width:1152px;
    min-height:470px;
    background-image:url('../images/contact\ bg.png');
}
.int-text {
    width:100%;
    max-width:50%;
    padding:50px;
}
.int-text h4 {
    font-size:16px;
    font-weight:700;
    line-height:22px;
    color:#fff;
}
.int-text h2 {
    font-size:50px;
    font-weight:800;
    line-height:60px;
    color:#fff;
    max-width:430px;
}
.white-line {
    width:66px;
    height:2px;
    background-color:#fff;
    margin:21px 0;
}
.int-text p {
    font-size:16px;
    font-weight:700;
    line-height:22px;
    color:#fff;
    max-width:416px;
    margin-bottom:40px;
}
.register {
    width:196px;
    height:42px;
    border-radius:28px;
    padding-left:17px;
    display:flex;
    align-items: center;
    background: linear-gradient(352deg, rgba(29,34,44,1) 0%, rgba(49,51,67,1) 100%, rgba(85,29,171,1) 100%);
    color:#fff;
    font-size:16px;
    font-weight:700;
    position:relative;

}
.register:hover {
    color:#fff;
}
.register::after {
    
    content: '>';
    width: 12px;
    height: 7;
    position: absolute;
    top: 15%;
    right: 10px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

.int-img {
    width:100%;
    max-width:50%;
    min-height:470px;
    background-image:url('../images/developers_image.png');
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
}
.int-img2 {
    width:100%;
    max-width:50%;
    min-height:470px;
    background-image:url('../images/developers_image.png');
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    display:none;
}

/*  COMPLETE END  */

.plugg {
    min-height:315px;
    background-image:url('../images/plugg_word\ _bg.jpg');
    background-size:cover;
    background-position:center;
    display:flex;
    justify-content: center;
    align-items: center;
}
/* .plugg-word {
    width:196px;
} */
.plugg-word h3 {
    font-size:60px;
    font-weight:700;
    line-height:42px;
    color:#fff;
}
.plugg-word h4 {
    font-size:40px;
    font-weight:700;
    line-height:42px;
    color:#fff;
}
.plugg h2 {
    font-size:26px;
    font-weight:600;
    line-height:32px;
    color:#fff;
    max-width:720px;
    margin-left:100px;
}

/*   PLUGG END    */

.contact {
    min-height:790px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.m-part {
    display: flex;
    border-radius: 20px;
    width: 100%;
    max-width: 1152px;
    min-height: 470px;
    background-image: url(../images/contact\ bg.png);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}

.left-div {
    padding: 30px 50px;
    width:100%;
    max-width:50%;
}
.left-div h1 {
    font-size:50px;
    font-weight:800;
    line-height:60px;
    color:#fff;
    max-width:570px;
    margin-bottom:15px;
}
.left-div h2 {
    font-size:26px;
    font-weight:700;
    line-height:24px;
    color:#fff;
    max-width:292px;
    margin-bottom:15px;
}
.left-div p {
    font-size:16px;
    font-weight:700;
    line-height:22px;
    color:#fff;
    max-width:416px;
}


.contact-right {
    width:100%;
    max-width:50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

.form {
    width:100%;
    max-width:470px;
    min-height:532px;
    background-color:#fff;
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    border:1px solid  #616F7B;
    border-radius:16px;
    position:absolute;
    right:40px;
}
.labelname {
    position:absolute;
    top:-10px;
    left:19px;
    background-color:#fff;
    
    font-size:12px;
    font-weight:400;
    color:#616F7B;
    padding-right: 2px;
}
.div1 {
    padding:0;
    margin:0;
    width:100%;
    max-width:380px;
    position:relative;
}
.form input {
    width:380px;
    height:46px;
    border:0.6px solid #99aabb;
    border-radius:23px;
    margin-bottom:20px;
    outline:none;
    padding-left:8px;
}
.form #name::placeholder {
  color:#41566C;
}
.form input::placeholder,textarea::placeholder {
    
    font-size:15px;
    font-weight:700;
    color:#616F7B;
    padding-left:16px;
}
textarea::placeholder {
    padding-top:10px;
}

.form textarea {
    width:380px;
    height:146px;
    border:0.6px solid #99aabb;
    border-radius:23px;
    resize:none;
    outline:none;
    margin-bottom:40px;
    padding:8px;
}
#contact-btn {
    width:100%;
    max-width:380px;
    height:46px;
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    display:inline-block;
    border:none;
    border-radius:28px;
    display:flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    position:relative;
}
#contact-btn:after {
    content:'>';
    width:15px;
    height:15px;
    color:#fff;
    position:absolute;
    top:25%;
    right:20px;
    

}

/*    CONTACT  END     */

.footer {
    min-height:230px;
    background: linear-gradient(352deg, rgba(2,4,8,1) 0%, rgba(39,42,75,1) 100%, rgba(85,29,171,1) 100%);
    padding: 50px 50px 15px 50px;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.row-top {
    display:flex;
    justify-content: space-between;
    width:100%;
}
.logo {
    width:168px;
    height:59px;
}
.logo img {
    width:100%;
}

.btm-nav {
    display:flex;
}
.btm-nav li {
    margin:0 10px;
}
.btm-nav li a {
    color:#fff;
    font-size:14px;
    font-weight:700;
}

.simbol {
    width:65px;
    height:58px;
}
.simbol img {
    height:100%;
}
.copy-r h4 {
    font-size:12px;
    font-weight:400;
    color:#fff;

}
/* FOOTER  END    */


/*   MODAL  CSS  START   */




/* modal one start */

.modal-one {
    position:absolute;
    top:100px;
    left:20%;
    width:1200px;
    height:550px;
    border-radius:20px;
    display:none;
}
.show {
    display:flex;
}

.modal-one::after {
    content:'';
    width:20px;
    height:20px;
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    position:absolute;
    top:-15px;
    left:450px;
}


.color-div {
    
    width:100%;
    max-width:30%;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    padding:30px;
    position:relative;
    z-index:10;
}
.color-div::before {
    content:"";
    background-color:#7924F1;
    opacity:0.9;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    border-top-left-radius:20px;
    border-bottom-left-radius:20px;
    z-index:-1;
    border-top:1px solid #9c57fb;
    border-bottom:1px solid #9c57fb;
}
.color-div .light {
    margin-bottom:20px;
    position:relative;
    
}
@media screen and (max-width: 750px) {
  .color-div {
    width: 100%;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
  }
  .color-div::before {
    border-bottom-left-radius: 0;
    border-top-right-radius: 20px;
  }
}
.color-div h1 {
    
    color:#fff;
    font-size:30px;
    font-weight:900;
    line-height:34px;
    margin-bottom:15px;
}
.color-div h2 {
    
    color:#fff;
    font-size:22px;
    margin-bottom:40px;
    line-height:24px;
    font-weight:700;
}
.info-ul {
    margin-bottom:50px;
}
.info-ul li {
    display:flex;
    
}
.info-ul li h3 {
    
    color:#fff;
    font-size:16px;
    margin:0;
    padding-left:15px;
    line-height:28px;
    font-weight:600;
}
.info-ul li h3 a {
    
    color:#fff;
    font-size:16px;
    margin:0;
    line-height:28px;
    font-weight:600;
}

.button-reg {
    display:inline-block;
    color:#fff;
    width:100%;
    max-width:278px;
    height:46px;
    background: linear-gradient(90deg, rgba(49,51,67,1) 0%, rgba(29,34,44,1) 100%);    
    display:flex;
    justify-content: center;
    align-items: center;
    border-radius:28px;
    position:relative;
    color:#fff;
    font-size:16px;
    -webkit-box-shadow: 0px 3px 6px 0px #616F7B; 
    box-shadow: 0px 3px 6px 0px #616F7B;
}
.button-reg::after {
    content: '>';
    width: 15px;
    height: 15px;
    color: #fff;
    position: absolute;
    top: 25%;
    right: 20px;
}
.button-reg:hover {
    color:#fff;
}

.white-div {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:70%;
    padding:30px 50px;
    background-color:#fff;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    background-image:url('../images/white-pattern.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    z-index:10;
}
@media screen and (max-width: 750px) {
  .white-div {
    max-width: 100%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 20px;
    padding: 20px 15px;
  }
}
.div-one1 {
    display:flex;
    align-items: flex-start;
    min-width:200px;
    max-width:auto;
    min-height:40px;
    border-radius:28px;
    
}
.div-one1:hover {
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
}
.div-one1:hover h4, .div-one1:hover h4 span {
    color:#fff;
}
.div-one1:hover .img1 {
    background-image:url('../images/check-w.svg');
}
.img1 {
    width:20px;
    height:20px;
    background-image:url('../images/check.svg');
    background-size:contain;
    margin-left:8px;
    margin-top:4px;
}

.sol-wrap {
    display:flex;
    justify-content: space-around;
    border-bottom:2px solid rgba(124, 42, 248, .6);
    
}
@media screen and (max-width: 750px) {
  .sol-wrap {
    flex-wrap: wrap;
  }
}
.div-foot {
    display:flex;
    justify-content: space-between;
    margin-top:30px;

}
@media screen and (max-width: 750px) {
  .div-foot {
    flex-wrap: wrap;
  }
}

.f-text h2 {
    
    color:#7C2AF8;
    font-size:20px;
    font-weight:900;
    width:170px;
}
.div-title h2 {
    text-align:center;
    
    font-size:18px;
    font-weight:700;
}
.v-line {
    width:50px;
    height:1px;
    background:#7C2AF8;
    margin:20px auto;
    
}
.solution-div {
    max-width:300px;
    padding-bottom:20px;
}
@media screen and (max-width: 750px) {
  .solution-div {
    max-width: 100%;
    width: 100%;
  }
}

.solution-div h3 {
    
    color:#7D25F8;
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
}
.solution-div h2 {
    
    color:#a5a5a5;
    font-size:16px;
    font-weight:500;
    
}
.solution-div ul{
    margin-left:-5px;
    min-height:272px;
}

.solution-div ul li {
    display:flex;
    align-items: flex-start;
    
}

.learn {
    margin-left:7px;
    text-decoration:underline;
    min-height:25px;
    
}
.learn:hover {
    
    text-decoration:underline;
}

.solution-div ul li img {
    width:20px;
    height:20px;
}
.solution-div ul li h4 {
    
    color:#474F56;
    font-size:15px;
    font-weight:700;
    padding-left:10px;
    padding-top: 6px;
}
.solution-div ul li h4 span {
    color:#7E7E7E;
    font-size:12px;
}

.c-link.active-class {
    padding:5px 15px;
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
    color:#fff;
}



/* end of modal  one */



.modal-two {
    position:absolute;
    top:100px;
    left:20%;
    width:1200px;
    height:550px;
    border-radius:20px;
    display:none;   
}
.show {
    display:flex;
}
.modal-two::after {
    content:'';
    width:20px;
    height:20px;
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    position:absolute;
    top:-15px;
    left:620px;
}
@media screen and (max-width: 750px) {
  .modal-two {
    flex-direction: column;
    height: auto;
    width: 87%;
    box-sizing: border-box;
    left: 5% !important;
    z-index: 101;
    backdrop-filter: blur(2px);
  }
  .modal-one {
    flex-direction: column;
    height: auto;
    width: 87%;
    box-sizing: border-box;
    left: 5% !important;
    z-index: 101;
    backdrop-filter: blur(2px);
  }
  
}
.white-div2 {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:70%;
    /* padding:20px; */
    background-color:#fff;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    background-image:url('../images/white-pattern.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    z-index:10;
}
.white-title {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    
}
.white-title h3 {
    
    color: #7D25F8;
    font-size: 20px;
    font-weight: 700;
    margin-bottom:30px;
}
.white-title p {
    
    color:#474F56;
    font-size:16px;
    font-weight:700;
    margin-bottom:15px;
    text-align:center;
    line-height:20px;
}
.fl {
    display:flex;
    
}
.solution-div2 {
    width:100%;
    max-width:50%;
    padding-left:15px;
}

.solution-div2 ul li {
    display:flex;
    align-items: flex-start;
    
}
.solution-div2 ul li img {
    width:20px;
    height:20px;
}
.solution-div2 ul li h4 {
    
    color:#7E7E7E;
    font-size:15px;
    font-weight:700;
    padding-left:10px;
}

.div-one2 {
    display:flex;
    align-items: flex-start;
    min-width:182px;
    max-width:auto;
    border-radius:28px;
    padding: 4px;
}
.div-one2:hover {
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
}
.div-one2:hover h4, .div-one1:hover h4 span {
    color:#fff;
}
.div-one2:hover .img1 {
    background-image:url('../images/check-w.svg');
}
.img1 {
    width:20px;
    height:20px;
    background-image:url('../images/check.svg');
    background-size:contain;
}

/* modal-two end */

/* modal-three strat */

.modal-three {
    position:absolute;
    top:100px;
    left:20%;
    width:1200px;
    height:550px;
    border-radius:20px;
    display:none; 
}
.show {
    display:flex;
}
.modal-three::after {
    content:'';
    width:20px;
    height:20px;
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid #fff;
    position:absolute;
    top:-15px;
    left:720px;
}
@media screen and (max-width: 750px) {
  .modal-three {
    flex-direction: column;
    height: auto;
    width: 87%;
    box-sizing: border-box;
    left: 5% !important;
    z-index: 101;
    backdrop-filter: blur(2px);
  }
}
.white-div2 {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:70%;
    padding:0px 10px 0 10px;
    background-color:#fff;
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    background-image:url('../images/white-pattern.jpg');
    background-repeat:no-repeat;
    background-size:cover;
    z-index:10;
}
@media screen and (max-width: 750px) {
  .white-div2 {
    max-width: 100%;
    border-top-right-radius: 0;
    border-bottom-left-radius: 20px;
    padding: 0px 15px;
  }
}

.white-title {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    margin-bottom:20px;
}
.white-title h3 {
    
    color: #7D25F8;
    font-size: 20px;
    font-weight: 700;
    margin-bottom:10px;
    padding-top:10px;
}
.white-title p {
    
    color:#474F56;
    font-size:16px;
    font-weight:700;
    margin-bottom:15px;
    text-align:center;
    line-height:20px;
}
.fl {
    display:flex;
    
}
@media screen and (max-width: 750px) {
  .fl {
    flex-wrap: wrap;
  }
}
.solution-div2 {
    width:100%;
    max-width:50%;
    padding-left:15px;
}
@media screen and (max-width: 750px) {
  .solution-div2 {
    max-width: 100%;
    padding-left: 0;
  }
  .solution-div2 ul {
    margin-bottom: 0;
  }
}

.solution-div2 ul li {
    display:flex;
    align-items: flex-start;
    
}
.solution-div2 ul li img {
    width:20px;
    height:20px;
}
.solution-div2 ul li h4 {

    color:#7E7E7E;
    font-size:15px;
    font-weight:700;
    padding-left:10px;
}


.div-one2 {
    display:flex;
    align-items: flex-start;
    min-width:182px;
    max-width:auto;
    border-radius:28px;
    padding: 4px;
}
.div-one2:hover {
    background: linear-gradient(90deg, rgba(124,42,248,1) 0%, rgba(124,42,248,1) 0%, rgba(85,29,171,1) 100%);
    border-radius:28px;
}
.div-one2:hover h4, .div-one1:hover h4 span {
    color:#fff;
}
.div-one2:hover .img1 {
    background-image:url('../images/check-w.svg');
}
.img1 {
    width:20px;
    height:20px;
    background-image:url('../images/check.svg');
    background-size:contain;
}

/* modal-three end */

 .modal-background {
    display: none;
    z-index: 101;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.9);
    backdrop-filter: blur(2px);
  }
  @media screen and (max-width: 750px) {
    .modal-background.show {
      display: block;
    }
} 

/* SOLUTIONS PAGE END   */


/*--------    MAESTRO PAGE START     ---- */


.header3 {
    min-height:664px;
    background-image:url('../images/MAESTRO_HERO_DESK.jpg');
    background-size:cover;
    background-position:center;
    background-repeat: no-repeat;
    position:relative;
}
.header-cont3 {
    min-height:605px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:relative;
}
.header-cont3 h3 {
    font-size:24px;
    font-weight:600;
    line-height:90px;
    color:#7C2AF8;
    text-transform:uppercase;
    text-align:center;
    transform:translateY(45px);
    
}
.header-cont3 h1 {
    font-size:86px;
    font-weight:700;
    line-height:86px;
    color:#fff;
    text-align:center;
    /* max-width:664px; */
    margin-bottom:30px;
}
.header-cont3 h4 {
    font-size:24px;
    line-height:32px;
    font-weight:600;
    color:#fff;
    max-width:801px;
    text-align:center;
    margin-bottom:30px;
}
/* --------- */
.serve-info {
    padding:30px 10px;
}
.maestro {
  margin:70px 0;
}

.maestro h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    text-align:center;
}
.maestro p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    
}


.payments-div {
    padding:0px 0 100px 0;
}
.payments-div h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}
.line-2 {
    width:66px;
    height:2px;
    background-color:#7C2AF8;
    margin:20px 0;
    
}
.payments-div>p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:885px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:73px;
}

.cards-div {
    padding-top:30px;
    display:grid;
    grid-template-columns: repeat(5, 1fr);    
}
.card-div {
    width:210px;
    height:190px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border:none;
    margin:0 5px;
}
.card-div h3 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    max-width:160px;
    height:34px;
    text-align:center;
}
.card-div p {
    font-size:16px;
    font-weight:600;
    line-height:20px;
    color:#fff;
    max-width:171px;
    height:20px;
    text-align:center;
}
.divide-line {
    width:47px;
    height:1px;
    background-color:#fff;
    margin:10px 0 6px 0;
}

.card-1 {
    background-image:url('../images/PAYMENTS-1.png');
    background-size:cover;
    background-position:center;
}
.card-2 {
    background-image:url('../images/PAYMENTS-2.png');
    background-size:cover;
    background-position:center;
}
.card-3 {
    background-image:url('../images/PAYMENTS-3.png');
    background-size:cover;
    background-position:center;
}
.card-4 {
    background-image:url('../images/PAYMENTS-4.png');
    background-size:cover;
    background-position:center;
}
.card-5 {
    background-image:url('../images/PAYMENTS-5.png');
    background-size:cover;
    background-position:center;
}

/* ----------------- */

.d-solutions {
    margin-bottom:160px;
}
.d-solutions h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:619px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}

.d-solutions p {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #495057;
    width:100%;
    max-width:724px;
    min-height:77px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:20px;
}

.grid-for-cards {
    padding-top:30px;
    display:grid;
    grid-template-columns: repeat(6, 1fr);    
}
.cardd {
    width:180px;
    height:240px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    border:none;
    margin:0 5px;
}
.cardd h3 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    max-width:145px;
    height:67px;
    padding-bottom:20px;
    text-align:center;
}
.cardd p {
    font-size:16px;
    font-weight:600;
    line-height:20px;
    color:#fff;
    max-width:160px;
    height:40px;
}
.dd-1 {
    background-image:url('../images/DIGITAL\ S\ 1.png');
    background-size:cover;
    background-position:center;
}
.dd-2 {
    background-image:url('../images/DIGITAL\ S\ 2.png');
    background-size:cover;
    background-position:center;
}
.dd-3 {
    background-image:url('../images/DIGITAL\ S\ 3.png');
    background-size:cover;
    background-position:center;
}
.dd-4 {
    background-image:url('../images/DIGITAL\ S\ 4.png');
    background-size:cover;
    background-position:center;
}
.dd-5 {
    background-image:url('../images/DIGITAL\ S\ 5.png');
    background-size:cover;
    background-position:center;
}
.dd-6 {
    background-image:url('../images/DIGITAL\ S\ 6.png');
    background-size:cover;
    background-position:center;
}

/* ---------------- */

.hosted-tools2 {
    min-height:958px;
    background: linear-gradient(352deg, rgba(2,4,8,1) 0%, rgba(39,42,75,1) 100%, rgba(85,29,171,1) 100%);
    padding-top:54px;
}

.hosted-tools2 h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#fff;
    width:100%;
    max-width:388px;
    margin:0 auto;
    text-align:center;
    margin-bottom:10;
}
.hosted-tools2 h3 {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color: #fff;
    width:100%;
    max-width:812px;
    margin: 0 auto;
    text-align:center;
    margin-bottom:60px;
}
.big-cards2 {
    display:grid;
    justify-items: center;
    grid-template-columns: 1fr 1fr;
}
.big-card2 {
    width:100%;
    max-width:535px;
    min-height:400px;
    
}
.icon2 {
    width:70px;
    height:70px;
    margin:0 auto;
    margin-bottom:20px;
}
.icon2 img {
    width:100%;
}
.big-card2 h2 {
    font-size:30px;
    font-weight:700;
    line-height:60px;
    color:#7C2AF8;
    text-align:center;
    margin-bottom:30px;
}
.big-card2 p {
    font-size:16px;
    font-weight:600;
    line-height:24px;
    color:#fff;
}
/* ------------------ */

.complete2 {
    padding-top:80px;
}
.complete2 h1 {
    font-size:60px;
    font-weight:700;
    line-height:60px;
    color:#29282A;
    width:100%;
    max-width:1150px;
    margin:0 auto;
    text-align: center;
    margin-bottom:60px;
}

.grid-cards-com {
    padding-top:30px;
    display:grid;
    /* justify-content: center; */
    grid-template-columns: repeat(5, 1fr);
    margin-bottom:36px;
    overflow-x: scroll;
}
.card-com {
    
    width:210px;
    min-height:190px;
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items:center;
    text-align:center;
    margin:0 5px;
}
.card-com h2 {
    font-size:22px;
    font-weight:700;
    line-height:26px;
    color:#fff;
    height:37px;
}

.crd-com1 {
    background-image:url('../images/UNDERBANKED.png');
    background-position:center;
    background-size:cover;
}
.crd-com2 {
    background-image:url('../images/FREELANCERS.png');
    background-position:center;
    background-size:cover;
}
.crd-com3 {
    background-image:url('../images/SELF.png');
    background-position:center;
    background-size:cover;
}
.crd-com4 {
    background-image:url('../images/CONSULTANTS.png');
    background-position:center;
    background-size:cover;
}
.crd-com5 {
    background-image:url('../images/STARTUP.png');
    background-position:center;
    background-size:cover;
}

.lgo {
    font-size:18px;
    font-weight:700;
    line-height:26px;
    color:#495057;
    text-align:center;
    margin-bottom:136px;
}

/* ------ */




/*--------    MAESTRO PAGE END    ---- */