.section-padding{
    padding: 60px 0;
} 
.section-heading {
	margin-bottom: 20px;
}
.section-text {
	margin-bottom: 36px;
}
/*========== Home Page ========*/
.banner-sub-title {
    font-size: 18px;
}

.home-banner {
	font-size: 36px;
	margin-bottom: 30px;
}
.banner-text {
	margin-bottom: 30px;
	font-size: 18px;
}

/*********** Home ABout **********/
.home-about-row{
    margin-top: 30px;
}



 

.banner-right {
    text-align: right;
    margin-top: 70px;
}
 

.banner-main-image {
    display: inline-block;
    margin-left: auto;
}

.inner-banner-image img {
    width: 369px;
}

.round-circle {
    position: absolute;
    right: -95px;
    top: -56px;
    width: 559px;
    left: auto;
}

.first-box {
    top: -34px;
    left: 211px;
}

.second-box {
    top: 112px;
    left: 125px;
}

.third-box {
    bottom: 60px;
    left: 70px;
}

.fourth-box {
    bottom: -60px;
    right: 0;
    left: 196px;
    margin: 0 auto;
    text-align: center;
}

.home-banner-icon-title {
    font-size: 18px;
}

.home-banner-icon {
    width: 80px;
}


/* botton */

#button {
    display: inline-block;
    background-color: #1761DE;
    width: 30px;
    height: 30px;
    text-align: center;
    border-radius: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 1em;
    line-height: 30px;
    color: #fff;
}

#button:hover {
    cursor: pointer;
    background-color: #0D0D0D;
}

#button:active {
    background-color: #0D0D0D;
}

#button.show {
    opacity: 1;
    visibility: visible;
}


/*--- Payment Orchestration System Architecture -----*/

.payment-text {
    margin-bottom: 30px;
}

.payment-lists li {
    margin-bottom: 10px;
}


/*--- Home Banner Review -----*/

.inner-review {
    text-align: center;
    width: fit-content;
    margin: 90px auto 0;
    display: flex;
    align-items: center;
    border: 1px solid #B4B4B4;
    border-radius: 100px;
    padding: 5px 26px 6px 7px;
    gap: 16px;
    background: #fff;
}

.banner-review::before {
    background: #B4B4B4;
    width: 90%;
    height: 1px;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: 35px auto 0;
    text-align: center;
    display: block;
}

.review-images img {
    width: 56px;
}

.review-images img:nth-child(2) {
    margin-left: -31px;
}

.review-images img:nth-child(3) {
    margin-left: -31px;
}

.review-images img:nth-child(4) {
    margin-left: -31px;
}


/*--- Brand Logo Section -----*/

.brand-logo-img {
    background: #fff;
    border-radius: 10px;
    margin: 0 15px;
    text-align: center;
    padding: 10px;
}

.brand-logo-img img {
    margin: 0 auto;
    width: 100%;
}


/*--- Partnership Section -----*/

.partnership-section {
    background: url(../images/bg/partnership_program_bg.png);
    background-position: center;
    background-position: bottom;
    background-repeat: no-repeat;
}

.partnership-section .heading-bottom-space {
    position: relative;
}

.partnership-section::before {
    background: transparent;
    width: 100%;
    height: 385px;
    position: absolute;
    top: 0;
    content: "";
    left: 0;
    border-radius: 0 0 200% 200%;
    border-bottom: 3px solid #D4D4D4;
    backdrop-filter: blur(1px);
}

.partnership-section::after {
    content: "";
    background: linear-gradient(0deg, #f2f2f2, transparent 100%);
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.partnership-counter {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 246px;
    height: 246px;
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
    padding: 15px;
    margin: 0 auto;
}

.counter-wrap1 {
    background: #BB255FAD;
}

.counter-wrap2 {
    background: #023B9BAB;
}

.counter-wrap3 {
    background: #4b048282;
}

.counter-wrap4 {
    background: #027150C7;
}

.counter-text {
    margin-top: 14px;
}

.fun-counter {
    font-size: 52px;
    color: #fff;
    font-family: 'Black Sans', serif;
}

.plus-icon {
    letter-spacing: 0;
    margin-left: -15px;
    font-style: normal;
}


/* Partnership Program Card */

.card-row {
    margin: 50px 0 46px;
}

.single-card {
    background: #0051DBC9;
    border-radius: 20px;
    opacity: 1;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    padding: 30px 15px;
}

.card-heading {
    margin: 12px 0 14px;
    color: #fff;
}

.card-text {
    color: #fff;
    line-height: 27px;
}


/* Partnership Program card list */

.single-points {
    border: 1px solid #B8B8B8;
    width: fit-content;
    padding: 10px 10px;
    border-radius: 100px;
    background: #ffffff4d;
    backdrop-filter: blur(10px);
    margin: 3px;
}

.point-built {
    width: 10px;
    height: 10px;
    background: var(--global-blue2);
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.built-title {
    font-size: 14px;
}


/*------- Resources Section ------*/

.perspective-card {
    padding: 40px 15px 30px;
    border-radius: 20px;
    transition: 0.4s all ease-in-out;
    width: 98%;
}

.perspective1-card {
    border: 1px solid #C4E4C6;
    background: linear-gradient(0deg, #fff, #E9FAEA 100%);
    transform: rotate(-2deg);
}

.perspective2-card {
    border: 1px solid #D2CDE8;
    background: linear-gradient(0deg, #fff, #EFEBFF 100%);
    transform: rotate(2deg);
}

.perspective3-card {
    border: 1px solid #C0DCE3;
    background: linear-gradient(0deg, #fff, #EBFBFF 100%);
    transform: rotate(-2deg);
}

.perspective4-card {
    border: 1px solid #E9D7C8;
    background: linear-gradient(0deg, #fff, #FFF4EB 100%);
    transform: rotate(2deg);
}

.perspective-heading {
    font-family: 'Black Sans Condensed', sans-serif;
    color: var(--global-secondary-color);
    margin: 20px 0 10px;
    font-weight: 500;
}

.perspective-text {
    color: var(--global-secondary-color);
    line-height: 25px;
}


/**-------specialities section -------*/

.specialities-section {
    background: #0F1521;
}

:where(.specialities-section, .started-section)::before {
    background: url(../images/shapes/body_shape.svg) no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    content: "";
    top: 0;
    opacity: 0.1;
    background-position: top;
    background-attachment: fixed;
}

.common-card {
    border-radius: 20px;
    padding: 50px 15px 40px;
}

.bg-blue-card {
    background: var(--global-blue2);
}
 

.speciality-heading {
    font-size: 48px;
}

.speciality_subheading {
    font-family: 'Black Sans Condensed', sans-serif;
}

.payment-efficiency-title {
    margin-bottom: 24px;
}

.revenue-processed-text {
    margin-top: 40px;
}

.blue-card-list ul {
    display: flex;
    flex-wrap: wrap;
}

.blue-card-list li {
    border: 1px solid #FFF9;
    width: fit-content;
    padding: 11px 11px;
    border-radius: 100px;
    margin: 4px 2px;
}

.list-text {
    font-size: 13px;
}

.list-dot {
    width: 10px;
    height: 10px;
    background: #FFF;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}


/*---- testimonials section ----*/

.testimonials-slider {
    width: 100%;
    margin: 0 auto;
    padding: 0 50px 0 0px;
    /* mask-image: linear-gradient(180deg, #ffffff, hsl(0deg 0% 0%) 20%, hsl(0deg 0% 0% / 50%) 80%, #f20c0c0d); */
}

.testimonials-slider::after {
    width: 100%;
    height: 347px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: linear-gradient(0deg, #ffffff 6%, transparent 100%);
    content: "";
}

.testimonials-shape-top {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -53%;
    z-index: -1;
}

.testimonials-inner-card {
    background: #F3F3F3A1;
    padding: 45px 15px;
    border-radius: 20px;
    width: 100%;
    margin: 20px auto 0;
    backdrop-filter: blur(2px);
    transition: 0.4s all ease-in-out;
}

.testimonials-images img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

:where(.testimonials-pera, .client-name, .client-designation) {
    color: #222222;
    transition: 0.4s all ease-in-out;
}

.testimonials-items.slick-current .testimonials-inner-card {
    background: #2364D0;
}

.slick-current :where(.testimonials-pera, .client-name, .client-designation) {
    color: #fff;
}

.testimonials-pera {
    line-height: normal;
    margin: 20px 0;
}

.client-name {
    font-family: 'Black Sans Condensed', sans-serif;
}

.testimonials-slider .slick-dots {
    bottom: auto;
    right: 0;
    left: auto;
    width: auto;
    top: 140px;
}

.testimonials-slider .slick-dots li {
    display: block;
    margin-bottom: 15px;
}

.testimonials-slider .slick-dots li button {
    width: 16px;
    height: 16px;
    color: transparent;
    background: #EAEAEA;
    border-radius: 50%;
}

.testimonials-slider .slick-dots li button::before {
    display: none;
}

.testimonials-slider .slick-active button {
    background: #1761DE !important;
}


/**-------Blog section -------*/

.blog-column {
    border-radius: 20px;
    height: 100%;
    background: #ffffffba;
}

.blog-image {
    overflow: hidden;
    border-radius: 20px;
}

.blog-image img {
    height: 300px;
    width: 100%;
    object-fit: cover;
}

.blog-content {
    margin-top: 20px;
}

.category-title {
    width: fit-content;
    padding: 5px 15px;
    font-size: 14px;
    color: #fff;
    background: #545454;
    border-radius: 50px;
    margin-bottom: 10px;
}

.blog-title {
    color: #222222;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Black Sans', serif;
    line-height: 35px;
}

.blog-column:hover .blog-title {
    color: var(--global-blue2);
}

.blog-text {
    color: #777777;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.read-more {
    border: 1px solid #222222;
    padding: 8px 15px;
    border-radius: 100px;
    font-size: 14px;
    margin-top: 30px;
    color: #222222;
    background: #fff;
    transition: 0.5s all ease-in-out;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

.blog-column:hover .read-more {
    background: var(--global-blue2);
    color: #fff;
    border: 1px solid var(--global-blue2);
}

.hover-effect {
    position: relative;
    overflow: hidden;
}

.hover-effect::before {
    content: "";
    position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255, 255, 255, .3);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 1;
}

.image-hover:hover .hover-effect::before {
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}


/*----- Payout System section ----*/

.payout-system {
    background: url(../images/bg/payout_bg.png);
    background-size: cover;
    background-position: center;
    padding: 70px 15px;
    border-radius: 20px;
    overflow: hidden;
}

.payout-system::before {
    background: #151e2fd6;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    content: "";
    z-index: -1;
}

.payout-top-shape {
    position: absolute;
    right: -150px;
    top: -85%;
}

.payout-bottom-shape {
    position: absolute;
    left: -40%;
    bottom: -57%;
}

.system-head ul {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.system-head li {
    background: #354259d4;
    width: fit-content;
    padding: 10px 17px;
    border-radius: 100px;
    backdrop-filter: blur(3px);
}

.system-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #1761DE;
}

.payout-title {
    margin: 37px 0 32px;
}

.payout-content p {
    margin-bottom: 80px;
}

.payout-multi-btn {
    text-align: center;
    display: flex;
    margin: 0 auto;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.common-btn.payout-read-more span {
    background: #2c364a;
}

.common-btn.payout-read-more i {
    background: #2c364a;
}


/*---- FAQs section ----*/

.accordion-item.custom-accordion-item {
    background: #F3F3F3;
    border: none;
    margin-bottom: 14px;
    border-radius: 20px;
    overflow: hidden;
}

.panel-button-click {
    background: transparent;
    padding: 20px 45px 20px 15px;
}

.accordion-button.panel-button-click:not(.collapsed) {
    background: transparent;
    box-shadow: none;
    padding: 34px 15px 20px;
    color: var(--global-secondary-color);
}

.panel-body {
    padding: 0 15px 34px;
}

.panel-button-click:not(.collapsed)::before {
    content: "\f106";
}

.panel-button-click::before {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    color: #2364D0;
    position: absolute;
    right: 10px;
    background: #fff;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    font-size: 20px;
}

.panel-button-click::after {
    display: none;
}


/*--- Footer Section ---*/

.footer-left {
    padding: 40px 30px;
}

.footer-left {
    background: #1761DE;
    border-radius: 20px;
    padding: 40px 16px;
}

.footer-logo img {
    width: 123px;
}

.logo-tagline {
    margin: 11px 0 30px;
}

.contact-widget {
    display: flex;
    align-content: center;
    margin-bottom: 20px;
}

.contact-icon {
    margin-right: 18px;
    display: flex;
    align-content: center;
    justify-content: center;
}

.contact-icon img {
    width: 30px;
}

.contact-inner-details {
    padding-left: 18px;
}

.contact-inner-details::before {
    background: #5F9AFF;
    width: 1px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
}

.widget-title {
    margin-bottom: 35px;
    display: block;
}

.link-widget {
    color: #E9E9E9;
    margin-top: 13px;
    display: block;
}

.contact-inner-details a {
    color: #fff;
}

.footer-forms {
    background: #1761DE;
    padding: 40px 15px;
    border-radius: 20px;
}

.lets-talk-title {
    margin-bottom: 25px;
}

.footer-input-field {
    height: 52px;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #fff;
    transition: 0.4s all ease-in-out;
}

.footer-textarea-field {
    height: 85px;
    border-radius: 10px;
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #fff;
    transition: 0.4s all ease-in-out;
    resize: none;
}

.footer-input-field:focus,
.footer-input-field:focus:focus-visible {
    border: 1px solid #005fbb;
}

.form-submit .btn-text {
    background: #fff;
    width: calc(100% - 50px);
    color: #1761DE;
}

.form-submit i {
    background: #000;
}

.footer-bottom {
    padding: 40px 0;
}

.footer-social li {
    display: inline-block;
    text-align: right;
    margin-left: auto;
    margin-left: 5px;
}

.social-media-icon i {
    width: 32px;
    height: 32px;
    text-align: center;
    justify-content: center;
    background: #162133;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    transition: 0.5s all ease-in-out;
}

.social-media-icon i:hover {
    background: #1761DE;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/*=====================================
           About Us Page
=====================================*/


/*--- About banner ----*/

.about-banner-heading {
    font-size: 86px;
}


/*--- About us section ----*/

.about-image {
    text-align: center;
    padding: 80px 15px 0 15px;
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}

.big-image img {
    width: 73%;
    margin: 0 auto;
}

.about-card-img.card-image1 {
    position: absolute;
    right: 0;
    top: -45px;
    width: 150px;
}

.about-card-img.card-image2 {
    position: absolute;
    top: 35px;
    left: 0;
    width: 150px;
}

.about-card-img.card-image3 {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 160px;
}

.about-content {
    padding: 0 15px 0 15px;
}

.big-image {
    position: relative;
    top: 20px;
}

.about-accordion .panel-body {
    padding: 0 13px 34px 22px;
}

.about-accordion .panel-button-click::before {
    content: "\2b";
    font-family: "Font Awesome 6 Free";
    font-weight: 600;
    color: #fff;
    position: absolute;
    right: 15px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 20px;
    background: #1761DE;
    border: 1px solid #1761DE;
}

.about-accordion .accordion-button.panel-button-click:not(.collapsed) {
    padding: 34px 60px 20px 22px;
}

.about-accordion .panel-button-click:not(.collapsed)::before {
    content: "\f00d";
    background: transparent;
    color: #1761DE;
}


/*--- Info Section ---*/

.right-side-image {
    padding-left: 63px;
}

.left-side-image {
    padding-right: 63px;
}

.blue-payment-card {
    background: #1761DE;
    width: fit-content;
    position: absolute;
    top: 64px;
    border-radius: 20px;
    padding: 12px 17px;
    display: flex;
    align-items: center;
    left: 15px;
    box-shadow: 2px 3px 9px -4px #000000a3;
}

.check-payment-icon img {
    border-radius: 0;
    padding-right: 15px;
}

.payment-title {
    font-family: 'Black Sans Condensed', sans-serif;
    font-weight: 500;
    font-size: 40px;
}


/*--- Preferred Payment Methods Section ---*/

.card-box-icon img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.card-box-title {
    color: #fff;
    margin: 23px 0;
}

.card-box-text {
    color: #fff;
}


/*--- screenshot image ---*/

.screenshot-groups-image {
    display: flex;
    padding: 45px 0% 0 0%;
    overflow: hidden;
    background: #f1f1f1;
    margin-top: 70px;
    border-radius: 20px 20px 0 0;
    margin-bottom: -7px;
    text-align: left;
    justify-content: flex-start;
}

.payment-successful-image img {
    position: absolute;
    top: 20%;
    right: -71%;
}

.screenshot-left img {
    position: relative;
    margin-top: -47px;
}

.screenshot-right img {
    position: relative;
    top: 25px;
}

.screenshot-bg-image {
    position: absolute;
    top: -153px;
    left: 0;
    right: 0;
    margin: 0 auto;
    opacity: 0.8;
}


/*=====================================
           Merchants Page
=====================================*/


/*--- Banner Section  ---*/

.merchant-banner-heading {
    font-size: 94px;
    margin-right: -130px;
}

.banner-btn {
    margin-top: 180px;
}

.banner-half-round-image {
    position: absolute;
    bottom: 0;
    z-index: -1;
}

.merchant-user-image {
    z-index: 1;
    text-align: right;
    padding-right: 25px;
    width: 75%;
    margin-left: auto;
}

.banner-receipt-image {
    position: absolute;
    top: 0;
    left: 14%;
    width: 302px;
}

.banner-mpos-image {
    position: absolute;
    bottom: 0;
    left: -103px;
    width: 218px;
}


/* double phone section */

.hero-section {
    background: linear-gradient(135deg, #0052D4, #4364F7);
    color: white;
    /* padding: 80px 20px; */
    text-align: left;
    position: relative;
}

.hero-text {
    max-width: 500px;
}

.mockup-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mockup-container img {
    width: 900px;
    max-width: 100%;
    transform: rotate(-10deg);
    margin-top: -134px;
    margin-left: 120px;
}

.mockup-container img:nth-child(2) {
    transform: rotate(10deg);
}


/*--- YouPe Billing Business Section  ---*/

.common-clip-shape {
    overflow: hidden;
    border-radius: 30px;
    height: 100%;
    position: relative;
    display: inline-block;
    padding: 2px;
    /* transition: all .3s ease-in-out; */
    width: 100%;
}

.common-inner-clip {
    position: relative;
    z-index: 1;
    border: 0;
    height: 100%;
    border-radius: 30px;
    transition: 0.3s all ease-in-out;
    padding: 60px 20px 10px;
}

.white-clip-box {
    border: 1px solid #0000001A;
}

.black-icon {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.white-icon {
    opacity: 0;
    bottom: -52px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.white-clip-box:hover .white-box-icon .white-icon {
    opacity: 1;
    bottom: 10px;
}

.white-clip-box:hover .billing-title {
    color: #FFFFFF !important;
    transition: none;
}

.white-clip-box:hover .billing-text {
    color: #FFFFFF !important;
    transition: none;
}

.white-clip-box:hover {
    background-color: #1761DE;
    transition: 0.7s all ease-in-out;
}


/*---- Get started online ---*/

.started-section {
    background: #1761DE;
}

.started-box {
    background: #fff;
    padding: 0 30px 30px;
    box-shadow: 0px 9px 32px #003DA566;
    border-radius: 30px;
}

.row.started-row {
    margin-top: 40px;
}

.started-col-wrapper {
    margin-top: 160px;
}

.online-started-image {
    display: flex;
    position: relative;
    top: -147px;
    margin-bottom: -100px;
    padding-left: 32px;
}

.started-left1 {
    width: auto;
    height: 425px;
}

.started-left2 {
    top: 31px;
    position: absolute;
    margin: 0 auto;
    text-align: center;
    left: 0;
    right: -235px;
}

.started-right1 {
    width: auto;
    height: 425px;
}

.started-right2 {
    top: 32%;
    position: absolute;
    right: -31px;
    margin: 0 auto;
}


/*---  Fueling business growth  ---*/

.common-box {
    border-radius: 15px;
    overflow: hidden;
    transition: 0.5s all ease-in-out;
    border: 1px solid #707070;
    background: #0D121C;
    padding: 40px;
}

.common-box:hover {
    border: 1px solid transparent
}

.common-box::before {
    background: #000;
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    transition: 0.5s all ease-in-out;
    top: 60px;
    left: 60px;
    border-radius: 50%;
}

.common-box:hover::before {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0
}

.box-card-green::before {
    background: #07b27f;
}

.box-lightish-purple::before {
    background: #af64e8;
}

.box-blue::before {
    background: #1761de;
}

.box-light-blue::before {
    background: #0084cf;
}

.box-peachy-maroney::before {
    background: #e89164;
}

.box-rich-maroon::before {
    background: #b0316c;
}

.box-childhood-crush::before {
    background: #e46868;
}

.box-ultraviolet-berl::before {
    background: #b439b9;
}

.box-greedy-gecko::before {
    background: #aa9721;
}

.card-box-icon img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.card-box-title {
    color: #fff;
    margin: 23px 0;
    font-family: 'Black Sans Condensed', sans-serif;
}

.card-box-text {
    color: #fff;
}


/*=====================================
          Payments Page
=====================================*/


/*---  Payment Banner Section ---*/

.add-new-card {
    position: absolute;
    z-index: 2;
    top: 20%;
    right: -3%;
    margin: 0 auto;
    text-align: center;
}

.visa-card-details {
    position: absolute;
    left: 0;
    top: 31%;
    z-index: 1;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.andres-card {
    position: absolute;
    top: -29px;
    left: 5%;
    right: 0;
    margin: 0 auto;
    text-align: center;
}

.maestro-balance-card {
    position: absolute;
    bottom: 0;
    right: -28px;
}

.payment-background {
    text-align: right;
    margin-left: auto;
    z-index: -1;
    position: relative;
}


/*---  Seamless  Checkout Section ---*/

.iframe-mobile-card {
    position: absolute;
    top: 26%;
    right: 0;
    width: 58%;
}

.seamless-lists {
    width: 600px;
}

.seamless-lists ul {
    margin-top: 30px;
    margin-bottom: 40px;
}

.seamless-lists li {
    padding-left: 21px;
    margin-bottom: 20px;
}

.text-primary-color span::before {
    width: 8px;
    height: 8px;
    position: absolute;
    left: -21px;
    top: 8px;
    background: #5AB8FF;
    content: "";
    border-radius: 50%;
}


/*---  Offer 180+ payment options  ---*/

.top-logo {
    justify-content: space-around;
    padding: 0 100px;
    margin-bottom: 30px;
}

.bottom-logo {
    justify-content: space-between;
}

.single-logo {
    width: 180px;
    text-align: center;
    padding: 10px 30px;
}


/*---  Simplified Payment Collection  ---*/

.payment-collection {
    background: #fff;
    padding: 10px 30px 34px;
}

.collection-img1 {
    margin-right: -18%;
    width: 46%;
}

.collection-img2 {
    margin-right: -23%;
    width: 46%;
}

.collection-img3 {
    width: 46%;
}

.collection-img4 {
    width: 55%;
}

.collection-img5 {
    position: absolute;
    right: -39%;
    left: 0;
    margin: 0 auto;
    width: 250px;
    top: 15px;
}

.collection-img6 {
    position: absolute;
    right: -25px;
    width: 162px;
    bottom: 10px;
}

.simplified-payment-column {
    background: #D0D0D0;
}

.simplified-payment-column::after {
    background: #1761DE;
}

.simplified-payment-column:hover .hover-transparent-bg {
    background: #fff;
}

@media (min-width:1200px) {
    .collection-img5 {
        right: -35%;
        width: 318px;
        top: 15px;
    }
    .collection-img6 {
        width: 200px
    }
}

@media (min-width:1400px) {
    .collection-img5 {
        right: -33%;
        width: 350px;
        top: 37px;
    }
    .collection-img6 {
        width: 250px;
    }
}

@media (min-width:1600px) {
    .collection-img1 {
        margin-right: -21%;
        width: 48%;
    }
    .collection-img2 {
        margin-right: -25%;
        width: 48%;
    }
    .collection-img3 {
        width: 48%;
    }
    .collection-img4 {
        width: 58%;
    }
    .collection-img5 {
        right: -40%;
        width: 411px;
        top: 41px;
    }
}


/*=====================================
          International Page
=====================================*/


/*---  Banner Section ---*/

.world-map {
    text-align: center;
    z-index: -1;
    position: relative;
}

.international-btn {
    margin-top: 100px;
}

.rouble-symbols {
    left: 15%;
    bottom: 24%;
}

.franc-symbols {
    bottom: 17%;
    left: 0;
    right: -7%;
    margin: 0 auto;
    text-align: center;
}

.rupee-symbols {
    left: 30px;
    top: 14%;
}

.pound-symbols {
    left: 1%;
    bottom: 25px;
}

.dollar-symbols {
    right: 25%;
    bottom: 0;
}

.euro-symbols {
    right: -30px;
    bottom: 29%;
}

.yuan-symbols {
    right: -22px;
    top: 22%;
}

.yen-symbols {
    right: -26%;
    left: 0;
    margin: 0 auto;
    text-align: center;
    top: -70px;
}

.world-map img {
    width: 90%;
}

.symbols-icon {
    width: 65px;
}


/*--- Feature Business section ---*/

.feature-content {
    padding-bottom: 100px;
}

.feature-btn {
    margin-top: 50px;
}

.feature-images {
    display: flex;
    margin: 0 11% -8%;
}

.feature-payment-image {
    margin-right: -31%;
}

.feature-confirmation-image {
    top: 110px;
}


/*--- Cross-Border transactions section ---*/

.cross-column {
    background: #D0D0D0;
}

.cross-inner-column {
    background: #fff;
    padding: 30px;
}

.cross-column::after {
    background: #1761DE;
}

.transactions-content {
    margin-top: 20px;
}


/* new css */

.card-para {
    color: #6C6C6C;
}



.titile-head {
    padding-bottom: 24px;
    color: #130339;
}

body {
    font-family: poppins, sans-serif;
}


/* navbar  start*/

.logo {
    font-size: 24px;
    font-weight: bold;
}

.logo span {
    color: #1761DE;
}

.logo span:last-child {
    color: #C4C4C4;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links a {
    text-decoration: none;
    color: #001D4F;
    font-weight: 500;
}

.nav-links {
    background-color: #FFFFFF;
    padding: 18px 41px;
    border-radius: 80px;
    border: 1px solid #0000001A;
}

.contact-btn {
    background: #1761DE;
    color: white;
    padding: 18px 41px;
    border-radius: 80px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-btn:hover {
    background-color: var(--global-blue5);
    color: var(--bs-white);
}

.contact-btn i {
    font-size: 14px;
}

.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}

.menu-toggle i {
    color: #001D4F;
}

.sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
    padding-top: 30px;
    transition: 0.3s;
    z-index: 11;
}

.sidebar.active {
    left: 0;
}

.sidebar a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #001D4F;
    font-size: 18px;
    border-bottom: 1px solid #ddd;
}

.close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 1199.98px) {
    .nav-links,
    .contact-btn {
        display: none;
    }
    .menu-toggle {
        display: block;
    }
}

.navbar-header {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    background: transparent;
    width: 100%;
}


/* navbar end */


/* home start  */

.home-banner-section {
	background-image: url(http://paygrey.com/wp-content/uploads/2025/04/bg.svg);
	width: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 120px;
	height: 100%;
	border-radius: 0 0 40px 40px;
}

.image-container {
    position: relative;
    width: 100%;
    /* max-width: 350px;  */
}

.main-image {
    width: 100%;
    height: auto;
    display: block;
    z-index: 1;
    position: relative;
}

.floating-card {
    position: absolute;
    z-index: 2;
    transition: all 0.3s ease;
}


/* Card Positions */

.card-top-left {
    top: -16px;
    left: -87px;
}

.card-bottom-left {
    bottom: 73px;
    left: -118px;
}

.card-top-right {
    top: 64px;
    right: 29px;
    width: 25%;
}

.card-bottom-right {
    bottom: 190px;
    right: -77px;
    width: 38%;
}

.unlock-world {
    font-size: 72px;
}


/* home end */


/* about section */

.about-section {
    padding: 0 0 60px;
}

.about-us {
    padding: 80px 0 20px;
}

.about-head h2 {
    color: #130339;
    padding-bottom: 24px;
}

.about-head p {
    color: #130339;
}

.operate {
    color: #6C6C6C !important;
    padding-bottom: 60px;
}

.the-best-payments-main {
    background-color: #A7E3D1;
    border-radius: 17px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.review-icon img {
    padding-bottom: 46px;
}

.millions-title p {
    margin: 20px 0 20px;
}

.mellions-content {
	background-color: #1761DE;
	border-radius: 17px;
	color: #fff;
	padding: 50px 23px 35px 25px;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

.mellions-content p {
    color: #fff;
    line-height: 162%;
    text-align: justify;
}

.millions-count {
	font-size: 30px;
	margin-bottom: 10px;
	line-height: 1;
}
.transactions-month {
	font-size: 20px;
	padding-bottom: 19px;
}
.payment-methods-title {
	padding: 55px 27px 30px;
}
.payment-method-count {
	font-size: 40px;
	line-height: 1;
}
.payments-methods-title {
	font-size: 20px;
}

.the-best-payments-title p {
    color: #130339;
}

.payments-methods-content {
	position: relative !important;
	width: 100%;
	padding: 30px 0;
}

.millions-title {
    text-align: end;
}

.the-best-payments {
    padding: 35px 10px;
}

.payments-methods {
    background-color: #E5E8FF;
    border-radius: 19px;
    height: 100%;
}


/* Key features */

.paygray-section {
    background-image: url(../images/resources/key-bg.png);
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.mobile-image {
    width: 309px;
    height: 572px;
}

.key-features-description {
    color: #6C6C6C;
}

.key-features {
    padding: 76px 0 22px;
    color: #130339;
}

.mobile-card {
	padding-top: 30px;
}
.green-greadent {
    width: 967px;
    height: 967px;
    top: 0;
    left: 0;
}

.light-pink-greadent {
    width: 967px;
    right: 0;
    bottom: 0;
}

.pay-gray-card {
    border-radius: 14px;
    padding: 41px 41px 31px 31px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-btn {
    padding: 12px 24px !important;
}

.space-para {
    margin: 14px 0px 20px 0px;
}

.mobile-aod {
    width: 18px;
    height: 29px;
}

.mobile-icon-toggle {
    height: 50px;
    width: 50px;
    right: 25px;
    top: -15px;
    background-color: #1761DE;
}

.mobile-card-space {
	margin-bottom: 40px;
} 
/*  pay in*/
.payin {
	padding-top: 60px;
}
.section-content h1 {
    color: #00163B;
    padding-bottom: 40px;
}

.section-content p { 
    z-index: 2;
    position: relative;
}
.payin-text {
    margin-bottom: 36px;
}

/* one-click disbursement tool to many banks */

.one-click-disbursement-row {
    position: relative;
    border-radius: 60px;
    background-color: #1761DE;
    /* overflow: hidden; */
}

.bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 60px;
    z-index: 1;
    mix-blend-mode: multiply;
}

.one-click-disbursement-row .row {
    position: relative;
    z-index: 2;
}

.onclick-title p,
.onclick-title h2,
.onclick-title a {
    color: #fff;
}

.onclick-sub-title {
    padding-bottom: 14px;
    color: #fff;
}

.onclick-title h2 {
    padding-bottom: 24px;
    color: #fff;
}

.onclick-title p {
    color: #fff;
}

.phone-img {
    margin-top: -120px;
}

.on-click-btn {
    background-color: #fff !important;
    color: #292929 !important;
}

.on-click-btn-main i {
    background-color: #fff !important;
    color: #292929 !important;
}

.on-click-btn-main i:hover {
    background-color: #0D0D0D !important;
    color: #292929 !important;
}

.on-click-btn-main {
    padding: 36px 0;
}

.on-click-btn-main:hover .on-click-btn {
    color: var(--bs-white) !important;
    background: var(--global-blue5) !important;
}

.on-click-btn-main:hover i {
    background: var(--global-blue5) !important;
    color: var(--bs-white) !important;
}

.payout-section {
	padding-top: 50px;
}
.one-click-disbursement-row {
	padding: 50px 20px;
}

/* computer-card-section */

.integrate-effort {
    color: #6C6C6C;
    padding: 0 10px 60px;
}

.integration-cards {
    padding: 20px 20px 25px 20px;
}

.integration-title {
    padding: 80px 0 22px;
    color: #130339;
}

.integration-section {
    overflow: hidden;
}

.image-outside {
    padding-left: 0;
}

.white-clip-box {
    background: #fff;
    border-radius: 40px;
    padding: 20px 20px 25px 20px;
    transition: all 0.3s ease-in-out;
}

.billing-title {
    font-size: 20px;
    color: #123D4A;
    font-weight: 600;
}
.integration-details {
	margin-top: 30px;
}
.integration-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 45%;
    height: 100%;
}

.integration-img img {
    object-fit: cover;
    object-position: right;
}

@media (max-width: 991.98px) {
    .integration-img {
        position: relative;
        width: 97%;
        height: auto;
        margin-bottom: 20px;
    }
    .integration-img img {
        object-fit: contain;
        object-position: center;
    }
}

.grid {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); */
    gap: 24px;
    grid-template-columns: 50% 50%;
}


/* hassle card section */

.hassle-free-card {
	margin: 30px 0 60px;
}

.card-info-text:hover {
    color: #1761DE !important;
}

.hassle-card {
    margin: 0 auto;
    max-width: 399px;
    border: 1px solid #E7EAEC;
    border-radius: 8px;
}

.card-info {
    padding: 9px 13px 19px 16px;
}

.card-info-text {
    color: #133240 !important;
}

.card-info-content {
    color: #133240 !important;
}

.card-date {
    color: #718096 !important;
}

.expolre-btn-box {
    max-width: 270px;
    padding-bottom: 80px;
}

.hassle-para {
    margin: 6px 0px 27px 0px;
}

.billing-text {
    color: #3F3F3FD9 !important;
    font-size: 16px;
}


/* blog page */
.blog-banner-title {
	color: #00163B;
	font-size: 36px;
}
.blog-banner-text {
	font-size: 18px;
	margin-bottom: 20px;
	color: #130339;
}

.blogs-title {
    padding: 80px 0 22px;
    color: #130339;
}
.blog-date {
	font-size: 14px;
	font-weight: 400;
}
/* locofy section */

.locofyai-section {
	background-image: url(../images/resources/blog_baner_bg.png);
	background-size: cover;
	background-position: bottom;
	background-repeat: no-repeat;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 130px 0;
}

.locofyai-row {
	background-color: #fff;
	padding: 24px;
	border-radius: 10px;
	box-shadow: 3px 4px 16px -8px #0000003d;
}
 
.blog-profile p {
    color: #96A2BE;
    font-size: 14px;
}

.business-owner {
    font-size: 20px;
    color: #130339 !important;
}

.blog-details-hr {
    border: 1px solid#DEE3EB !important;
}

hr {
    color: #ECF0F6;
    border: 1px solid #ECF0F6;
}

.card-text {
    color: #6C6C6C !important;
    font-size: 16px;
}

.profile-name {
	color: #495367;
	font-size: 17px;
	margin: 0px;
}
.profile {
	gap: 10px;
	padding-top: 48px;
	align-items: center;
}


/* filter tab */

#portfolio {
    margin: 0 auto;
}

.discover-mored-head {
    padding: 70px 0 40px !important;
    color: #130339 !important;
}

.discover-head {
    position: relative;
}

.discover-head h2 {
    color: #130339;
}

.tab-footer {
    padding-top: 70px;
}

.tabs-btn button {
    font-family: 'Fredoka', sans-serif;
    font-weight: 500;
}

.filter-button {
    font-size: 18px;
    border: 1px solid #BAC2D6;
    border-radius: 36px;
    text-align: center;
    color: #03181B;
    background-color: white;
}


.filter-button:focus {
    background-color: #1761DE;
    color: white;
}

.filter-button:hover {
    font-size: 18px;
    border: 1px solid #BAC2D6;
    text-align: center;
    color: #ffffff;
    background-color: #1761DE;
}

.btn-default:active .filter-button:active {
    background-color: #1761DE;
    color: white;
}
.filter-button.active, .filter-button:focus {
	background-color: #1761DE;
	color: white;
	border: 1px solid #1761DE;
}

.filter-button:hover {
    border: 1px solid #BAC2D6;
    color: #ffffff;
    background-color: #1761DE;
}

.port-image {
    width: 100%;
}

.gallery_product {
    margin-bottom: 24px;
}

.card {
    border: 0.7px solid #DEE3EB !important;
}
.gallery_product .card {
	height: 100%;
}
.gallery_product img {
    object-fit: cover;
}

.tabs-btn {
	gap: 16px;
    margin-bottom: 40px;
}

.tabs-btn button {
    padding: 14px 30px;
    color: #130339;
}

.frequently-question {
    padding: 100px 0 52px 0;
}

.blog-banner-sub-title {
	background-color: #EBEEF2;
	width: 100px;
	padding: 4px 8px;
	font-size: 14px;
	border-radius: 6px;
	margin-bottom: 10px;
	color: #495367;
}

.active-profile {
    padding: 0 16px 16px !important;
}

.card-body h6 {
    padding-top: 4px;
}
.read-time {
	background-color: #EBEEF2;
	width: 100px;
	padding: 4px 8px;
	font-size: 14px;
	border-radius: 6px;
	margin-bottom: 10px;
	color: #495367;
}
.blog-page-title a {
    font-size: 26px;
    color: #1A202E;
}
.blog-page-title a:hover {
	color: #1761DE;
} 
.more-tpic {
    padding: 50px 0 40px;
}

.payment-blogs-content-main p {
    font-size: 16px;
}

.card-body h6:hover {
    color: #1761DE !important;
}

.blog-details-page-head h1:hover {
    color: #1761DE !important;
}

.blog-details-page-head {
    color: #00163B;
}

.social-media {
    gap: 17px;
    position: sticky;
    right: 0;
    top: 20px;
}

.linkdin {
    position: absolute;
    right: 0;
    top: 0;
}

.twitter {
    position: absolute;
    right: 0;
    top: 50px;
}

.facebook {
    position: absolute;
    right: 0;
    top: 100px;
}

.instagram {
    position: absolute;
    right: 0;
    top: 150px;
}

.three-types-of-payment-head {
    color: #00163B;
}

.blog-common-head {
    color: #1A202E;
    font-size: 26px;
    font-weight: 700;
}


/* slider */
.testimonial-section {
	margin-top: 30px;
}
.testimonial-slider {
    display: flex;
}

.testimonial {
    background: #fff;
    border-radius: 10px;
    text-align: left;
    margin: 10px;
    border: 1px solid #E7EAEC;
    padding: 24px;
}
.testimonials-text {
	color: #133240;
	line-height: normal;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
} 

.testimonial-discription {
    color: #6C6C6C !important;
    padding: 23px 0 62px;
}
 

.stars {
    color: #f4b400;
    margin-top: 5px;
}
.testimonial-title {
	font-size: 22px;
	color: #133240;
	margin: 12px 0;
}
.testimonial-slider {
    position: relative;
    /* overflow: hidden; */
}

.slick-dots li button:before {
    font-size: 30px !important;
    color: #1761DE !important;
}


/* Left gradient */

.testimonial-slider::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to right, #FFFFFF, transparent);
    z-index: 1;
}


/* Right gradient */

.testimonial-slider::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 100%;
    background: linear-gradient(to left, #FFFFFF, transparent);
    z-index: 1;
}


/* blog details section */

.blog-details-section {
	background-image: url(../images/resources/blog_baner_bg.png);
	height: 100%;
	width: 100%;
	background-repeat: no-repeat;
	background-size: auto;
}

.blog-details-section {
    padding-top: 146px;
}

.table-of-content {
    border-radius: 8px;
    background-color: #FFFFFF;
    padding: 15px;
    width: 100%;
}

.table-of-content-head {
    font-size: 18px;
    color: #1A202E;
}

.breadcrumb li {
    color: #5E6A86;
}

.table-of-content-text li:hover {
    color: #1761DE;
}

.table-of-content-text li {
    color: #6C6C6C;
    font-size: 16px;
}

.table-of-content-text {
    position: sticky;
    top: 20px;
}

.payment-blogs-content-main {
    padding: 20px 0 !important;
}

.payment-blogs-content-main h3 {
    padding-bottom: 10px;
    color: #1A202E;
}

.payment-blogs-content-main p {
	color: #6C6C6C;
	margin-bottom: 20px;
}
.table-of-content-text {
    display: grid;
    gap: 10px;
}

.breadcrumb li:hover {
    color: #1761DE;
}
.discover-more-topics-section {
	position: relative;
	background: #fff;
}
.blog-details-card{
    height: 100%;
}
/* animation */

@keyframes floatUpDown {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

.floating {
    animation: floatUpDown 3s ease-in-out infinite;
    position: absolute;
}

@keyframes rotateBack {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.mobile-icon-toggle {
    transition: transform 0.5s ease-in-out;
}

.mobile-icon-toggle:hover {
    transform: scale(1.1);
}

.mobile-icon-toggle:hover img {
    transform: rotateY(180deg);
    transition: transform 0.5s ease-in-out;
}


/* photo anmiation */

.shine-hover {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.shine-hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    transition: none;
}

.shine-hover:hover::before {
    animation: shine-forward 1s forwards;
}

.shine-hover:not(:hover)::before {
    animation: shine-backward 1s forwards;
}

@keyframes shine-forward {
    0% {
        left: -75%;
    }
    100% {
        left: 125%;
    }
}

@keyframes shine-backward {
    0% {
        left: 125%;
    }
    100% {
        left: -75%;
    }
}
#ez-toc-container.ez-toc-white {
width: 100%;
}
div#ez-toc-container ul li {
    margin-bottom: 13px;
}
.profile-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}
#ez-toc-container {
    width: 100% !important;
}
/* count */