/home/bdqbpbxa/demo-subdomains/gumballpay.goodface.com.ua/frontend/Homepage.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="Page description">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- TODO: Delete noindex on production -->
    <meta name="robots" content="noindex">
    <meta name="googlebot" content="noindex">
    <!-- TODO: Set absolute page URL -->
    <link rel="canonical" href="https://sitename.com/page">
    <!-- Mobile -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="format-detection" content="telephone=no">

    <title>Homepage</title>
    <link rel="stylesheet" href="./css/lib/swiper-bundle.min.css">

    <link rel="stylesheet" href="./css/styles.css">
    <link rel="stylesheet" href="./css/adaptives.css">

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="./favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicon/favicon-16x16.png">
    <link rel="manifest" href="./favicon/site.webmanifest">
    <link rel="mask-icon" href="./favicon/safari-pinned-tab.svg" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">
</head>

<body>
    <header class="header --rounded">
        <div class="header-blured-bg"></div>
        <div class="container">
            <div class="header__inner">
                <a href="Homepage.html" class="logo">
                    <img src="images/homepage/logo-white.svg" alt="Logo">
                    <img src="images/homepage/logo-dark.svg" alt="Logo">
                </a>
                <div class="header__menu">
                    <div class="header__accordion">
                        <span class="header__accordion-opener body-2 body-2-medium link">
                            Solutions
                        </span>
                        <div class="header__accordion-content">
                            <div class="container">
                                <div class="header__accordion-menu">
                                    <a href="Payment-processing.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-1.png" alt="">
                                            <img src="images/ui-kit/header/header-1-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                Payment processing
                                            </p>
                                            <p class="text body-2 --weight500">
                                                We provides payment instruments to support different online businesses.
                                                With a single integration, our merchants can start accepting online
                                                payments globally.
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Global-coverage.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-2.png" alt="">
                                            <img src="images/ui-kit/header/header-2-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                Global coverage
                                            </p>
                                            <p class="text body-2 --weight500">
                                                We work with a vast network of acquirers spread across 4 continents
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Smart-routing.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-3.png" alt="">
                                            <img src="images/ui-kit/header/header-3-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                Smart routing
                                            </p>
                                            <p class="text body-2 --weight500">
                                                Smart routing helps online businesses bypass losing traffic and avoid
                                                frustrated users due to false declines.
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Fraud-prevention.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-4.png" alt="">
                                            <img src="images/ui-kit/header/header-4-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                Fraud & chargeback prevention
                                            </p>
                                            <p class="text body-2 --weight500">
                                                Our solution comes with pre-integrated Fraud & Chargeback prevention
                                                tools from industry-leading suppliers
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Authentication.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-5.png" alt="">
                                            <img src="images/ui-kit/header/header-5-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                Authentication
                                            </p>
                                            <p class="text body-2 --weight500">
                                                Security is one of the top priorities for our merchants when accepting
                                                payments online.
                                            </p>
                                        </div>
                                    </a>
                                    <a href="24-7-support.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-6.png" alt="">
                                            <img src="images/ui-kit/header/header-6-black.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 link__bold">
                                                24/7 support
                                            </p>
                                            <p class="text body-2 --weight500">
                                                Accepting payments online is a process that requires constant
                                                monitoring.
                                            </p>
                                        </div>
                                    </a>
                                </div>
                                <a class="body-2 body-2-medium arrow-link" href="Solutions.html">all solutions</a>
                            </div>
                        </div>
                    </div>
                    <a class="body-2 body-2-medium link" href="About-us.html">About us</a>
                    <a class="body-2 body-2-medium link" href="Blog.html">Blog</a>
                    <a class="body-2 body-2-medium link" href="FAQ.html">FAQ</a>
                    <a class="body-2 body-2-medium link" href="Contact-us.html">Contact us</a>
                </div>
                <a href="#" class="header__button">Get started</a>
                <div class="mobile-menu-opener">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
        <div class="mobile-menu">
            <div class="container mobile-menu__wrapper">
                <div class="mobile-menu__scroller">
                    <div class="mobile-menu-inner">
                        <div class="header__accordion --accordion">
                            <div class="header__accordion-opener-container">
                                <span class="header__accordion-opener title-3 mobile__title-3 link --accordion__open">
                                    Solutions
                                </span>
                                <a href="Solutions.html" class="title text-3 mobile__text-2 --weight500">
                                    All solutions
                                </a>
                            </div>
                            <div class="--accordion__content-container">
                                <div class="header__accordion-content --accordion__content">
                                    <a href="Payment-processing.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-1.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                Payment processing
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Global-coverage.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-2.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                Global coverage
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Smart-routing.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-3.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                Smart routing
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Fraud-prevention.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-4.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                Fraud & chargeback prevention
                                            </p>
                                        </div>
                                    </a>
                                    <a href="Authentication.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-5.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                Authentication
                                            </p>
                                        </div>
                                    </a>
                                    <a href="24-7-support.html" class="header__accordion-item">
                                        <div class="img">
                                            <img src="images/ui-kit/header/header-6.png" alt="">
                                        </div>
                                        <div class="info">
                                            <p class="title text-3 mobile__text-2 --weight500">
                                                24/7 support
                                            </p>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <a class="title-3 mobile__title-3 link" href="About-us.html">About us</a>
                        <a class="title-3 mobile__title-3 link" href="Blog.html">Blog</a>
                        <a class="title-3 mobile__title-3 link" href="FAQ.html">FAQ</a>
                        <a class="title-3 mobile__title-3 link" href="Contact-us.html">Contact us</a>
                    </div>
                    <div class="social-list">
                        <a href="#">
                            <img src="./images/footer/media-inst.svg">
                        </a>
                        <a href="#">
                            <img src="./images/footer/media-fb.svg">
                        </a>
                        <a href="#">
                            <img src="./images/footer/media-linkedin.svg">
                        </a>
                        <a href="#">
                            <img src="./images/footer/media-twitter.svg">
                        </a>
                    </div>
                </div>
                <a href="#" class="button__blue">Get started</a>
            </div>
        </div>
    </header>

    <main>
        <section class="hero">
            <div class="section-blur">
                <span class="blur-item"></span>
                <span class="blur-item"></span>
                <span class="blur-item"></span>
                <span class="blur-item"></span>
                <span class="blur-item"></span>
                <span class="blur-item"></span>
                <span class="blur-item"></span>
            </div>
            <div class="container">
                <div class="hero__inner">
                    <h1 class="title title-1 mobile__title-1">Payment transaction <br /> processing
                        <img src="images/homepage/text-arrow.svg">
                        <span class="title-opacity-white5">by professionals </span>
                    </h1>
                    <p class="text-2 hero__text">Bringing stability to payment processing since 2019</p>
                    <a href="Contact-us.html" class='button__blue hero__button'>
                        Get started
                    </a>
                    <span class="anchor hero__anchor">
                        <div class="anchor__container">

                        </div>
                    </span>
                </div>
                <div class="hero__bgimage">
                    <picture>
                        <source srcset="images/homepage/main-mob.png" media="(max-width: 1025px)">
                        <img src="images/homepage/main.png" alt="">
                    </picture>
                </div>
            </div>
        </section>

        <section class="homepage-solution">
            <div class="container">
                <div class="solution__info">
                    <div class='body-2 body-2-medium mobile__body-2 signpost'>
                        Accept payments effortlessly
                    </div>
                    <h2 class="title-2 solution__info-title mobile__title-2">
                        Facilitate seamless transactions
                        <br>and accept multi-currency payments globally
                        <span class="title-opacity-dark4">with the GumBallPay payment gateway</span>
                    </h2>
                    <p class="text-2 mobile__text-2 solution__info-text">
                        With advanced anti-fraud & chargeback prevention tools, professional 24/7 support, and a
                        feature-rich system, GumBallPay ensures your transaction flow is healthy, seamless, and
                        efficient
                    </p>
                </div>
            </div>
        </section>

        <section class="homepage-solution-tabs">
            <div class="container">
                <div class='signpost body-2 body-2-medium  mobile__body-2 mob-sign-post'>
                    our Solutions
                </div>
                <div class="solution-tabs --tabs-container" data-auto-height>
                    <div class="tabs__items --tabs-container__items">
                        <div class="swiper-wrapper --tabs-container__items-inner">
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/payment.png"></div>
                                <p class="title title-3 mobile__title-3">Accept payments</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="Payment-processing.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/global.png"></div>
                                <p class="title title-3 mobile__title-3">Global coverage</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="Global-coverage.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/smart-routing.png"></div>
                                <p class="title title-3 mobile__title-3">Smart routing</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="Smart-routing.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/fraud.png"></div>
                                <p class="title title-3 mobile__title-3">Fraud & chargeback
                                    prevention</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="Fraud-prevention.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/authentication.png"></div>
                                <p class="title title-3 mobile__title-3">Authentication</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="Authentication.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                            <div class="tab__card --tabs-container__item swiper-slide">
                                <div class="tab__card-image"><img src="images/solutions/support.png"></div>
                                <p class="title title-3 mobile__title-3">24/7 support</p>
                                <p class="text text-2 mobile__text-2">
                                    Smart routing helps online businesses bypass losing traffic and avoid frustrated
                                    users
                                    due
                                    to false declines.
                                </p>
                                <a href="24-7-support.html" class='button button__transparent'>
                                    Explore solution
                                </a>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>


                    <div class="tabs__nav">
                        <div class='signpost body-2 body-2-medium  mobile__body-2'>
                            our Solutions
                        </div>
                        <div class="--tabs-container__menu tabs__nav-inner">
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>Accept payments</span>
                            </div>
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>
                                    Global coverage
                                </span>
                            </div>
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>Smart routing</span>
                            </div>
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>Fraud & chargeback
                                    prevention</span>
                            </div>
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>Authentication</span>
                            </div>
                            <div class="tabs__nav-item --tabs-container__menu-item title-3">
                                <span>24/7 support</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="rate-section --rounded-section">
            <div class="container">
                <div class="rate">
                    <div class="rate__scheme">
                        <img src="images/homepage/rate-group.png" alt="rate in percent">
                    </div>
                    <div class="rate__content">
                        <div class='signpost'>
                            <p class="body-2 body-2-medium  mobile__body-2">Convercion rate</p>
                        </div>
                        <p class="title-2 rate__title mobile__title-2">
                            Improve transaction <br>
                            <span class="title-opacity-dark4">approval rates</span>
                        </p>

                        <div class="rate__checks">

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Offer local languages and local payment methods in the Checkout.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Geolocation</p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Distributing unsuccessful transactions between multiple acquiring banks to
                                            secure higher acceptance rates.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Cascading</p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Developing the most efficient transaction route to increase approval rates.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Smart routing</p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Adapt the Checkout window to your website design, and make it unique.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Customization</p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Develop the best customer checkout journey. Increase conversions.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Outstanding customer
                                    journey</p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Reduce fraud and chargeback ratio by using AI-based security tools.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">Advanced fraud
                                    prevention
                                </p>
                            </div>

                            <div class="check">
                                <div class="check__icons">
                                    <div class='check__plus'></div>
                                    <div class='check__helper'>
                                        <span class="check__helper-info body-2 --weight500">
                                            Returning customers won’t need to re-enter their payment details. The system
                                            “remembers’ user data and preferred payment methods.
                                        </span>
                                    </div>
                                </div>
                                <p class="body-1-demibold check__text mobile__body-1-medium">“Remember me”</p>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </section>

        <section class="homepage-payment --dark-section">
            <div class="container">
                <div class="homepage-payment__inner">
                    <div class="homepage-payment__text">
                        <div class='signpost body-2 body-2-medium  mobile__body-2'>
                            payment methods
                        </div>
                        <p class="title-2 -title mobile__title-2">
                            <span class="title-opacity-white5">We work with proven</span>
                            payment methods
                        </p>
                        <p class="text-2 -text mobile__text-2 ">
                            Payment gateway that helps your business grow with multiple payment methods
                        </p>
                        <a href="Contact-us.html" class='button__blue -button for-pc'>
                            Contact us
                        </a>
                    </div>
                    <div class="homepage-payment__image">
                        <div class="section-blur">
                            <span class="blur-item green-blur"></span>
                            <span class="blur-item yellow-blur"></span>
                            <span class="blur-item pink-blur"></span>
                        </div>
                        <img src="./images/homepage/creditcard.png">
                    </div>
                    <a href="Contact-us.html" class='button__blue -button for-mob'>
                        Contact us
                    </a>
                </div>
            </div>
        </section>

        <section class="homepage-about --dark-section">
            <div class="container">
                <div class="homepage-about__inner">
                    <div class="section-blur">
                        <span class="blur-item blue-blur"></span>
                        <span class="blur-item blue-blur"></span>
                        <span class="blur-item pink-blur"></span>
                    </div>
                    <div class='signpost body-2 body-2-medium  mobile__body-2'>
                        About us
                    </div>
                    <p class="title title-2 mobile__title-2">
                        <img src="./images/homepage/about-icon.svg">
                        GumballPay was founded in 2019 with a core focus on providing a payment gateway solution to
                        support
                        online businesses.
                        <span class="title-opacity-white5">Since then, <br class="--pc-display"> our activities
                            havespread across 6
                            continents</span>
                    </p>
                    <a href="About-us.html" class='button-white__transparent button'>
                        About us
                    </a>
                </div>
            </div>
        </section>

        <section class="why-us --dark-section --rounded-section">
            <div class="container">
                <div class="why-us__inner">
                    <div class="why-us__text">
                        <p class="title-1 mobile__title-2">
                            Why choose&nbsp;us?
                        </p>
                        <p class="text-2 -text mobile__text-2 ">
                            We are experts in finding solutions for the most complex payment
                            challenges
                        </p>
                        <a href="Contact-us.html" class='button__blue -button'>
                            Contact us
                        </a>
                    </div>

                    <div class="why-us__cards">
                        <div class="why-us__card">
                            <img src="./images/homepage/why-us-1.png">
                            <p class="title text-1 mobile__text-1">Seamless integration</p>
                            <p class="text body-1-medium mobile__body-1-medium">
                                Our API integration is simple and takes 48 hours to complete.
                            </p>
                        </div>
                        <div class="why-us__card">
                            <img src="./images/homepage/why-us-2.png">
                            <p class="title text-1 mobile__text-1">Worldwide processing</p>
                            <p class="text body-1-medium mobile__body-1-medium">
                                Our payment processing solution supports 180 countries around the world with local
                                acquiring
                                and optimized acceptance rates.
                            </p>
                        </div>

                        <div class="why-us__card">
                            <img src="./images/homepage/why-us-3.png">
                            <p class="title text-1 mobile__text-1">Major payment schemes</p>
                            <p class="text body-1-medium mobile__body-1-medium">
                                Accept all major payment schemes such as MasterCard, Discover, Visa, Diners, JCB, and
                                RuPay.
                            </p>
                        </div>

                        <div class="why-us__card">
                            <img src="./images/homepage/why-us-4.png">
                            <p class="title text-1 mobile__text-1">24/7 support</p>
                            <p class="text body-1-medium mobile__body-1-medium">
                                We make sure our customers can get their issues resolved regardless of what time or day
                                it is.
                            </p>
                        </div>

                        <div class="why-us__card">
                            <img src="./images/homepage/why-us-5.png">
                            <p class="title text-1 mobile__text-1">Smart routing</p>
                            <p class="text body-1-medium mobile__body-1-medium">
                                Developing the most efficient transaction route to increase approval rates
                            </p>
                        </div>
                        <div class="section-blur">
                            <span class="blur-item blue-blur"></span>
                            <span class="blur-item blue-blur"></span>
                            <span class="blur-item pink-blur"></span>
                            <span class="blur-item pink-blur"></span>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="integrations">
            <div class="container">
                <div class='signpost body-2 body-2-medium  mobile__body-2'>
                    integrations
                </div>
                <h2 class="title title-2 mobile__title-2">
                    Fast approval, simple onboarding, <br class="--pc-display">
                    <span class="title-opacity-dark4"> & seamless integration </span>
                </h2>

                <div class="integrations__list">
                    <div class="integrations__item">
                        <p class="title title-3 mobile__title-3">24 hours</p>
                        <p class="text body-1-medium mobile__body-1-medium">
                            Get your KYB package approved
                            and onboarded in 24 hours
                        </p>
                    </div>
                    <div class="integrations__item">
                        <p class="title title-3 mobile__title-3">
                            48 hours
                        </p>
                        <p class="text body-1-medium mobile__body-1-medium">
                            Integrate within 48 hours and start
                            processing payments
                        </p>
                    </div>
                </div>
            </div>
        </section>

        <section class="integrate-accordions --rounded-section">
            <div class="container">
                <div class="integrate-accordions__wrapper">
                    <div class="integrate-accordions__left">
                        <img src="images/homepage/integration.png" alt="">
                    </div>
                    <div class="integrate-accordions__right">
                        <div class='signpost body-2 body-2-medium  mobile__body-2'>
                            integrate with us
                        </div>
                        <h2 class="title title-2 mobile__title-2">
                            <span class="title-opacity-dark4">There are different</span> <br class="--pc-display">
                            ways to integrate with us:
                        </h2>

                        <div class="accordions">
                            <div class="accordion-left-border --accordion"
                                data-accordion-group="integrations-accordions">
                                <span class="title text-1 mobile__text-1 --accordion__open">
                                    S2S integration
                                </span>
                                <div class="--accordion__content-container">
                                    <div class="text body-1-medium mobile__body-1-medium --accordion__content">
                                        A customizable payment form is hosted on the gateway provider's server. The
                                        cardholder enters personal data on the merchant's registration page. When
                                        reaching the checkout page, the client is redirected to a 3rd party payment
                                        provider's form and enters their
                                        card details. After the payment is successfully made, they are redirected back
                                        to the merchant's website.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-left-border --accordion"
                                data-accordion-group="integrations-accordions">
                                <span class="title text-1 mobile__text-1 --accordion__open">
                                    H2H integration
                                </span>
                                <div class="--accordion__content-container">
                                    <div class="text body-1-medium mobile__body-1-medium --accordion__content">
                                        A customizable payment form is hosted on the gateway provider's server. The
                                        cardholder enters personal data on the merchant's registration page. When
                                        reaching the checkout page, the client is redirected to a 3rd party payment
                                        provider's form and enters their
                                        card details. After the payment is successfully made, they are redirected back
                                        to the merchant's website.
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-left-border --accordion"
                                data-accordion-group="integrations-accordions">
                                <span class="title text-1 mobile__text-1 --accordion__open">
                                    Cashier/Platform provider
                                </span>
                                <div class="--accordion__content-container">
                                    <div class="text body-1-medium mobile__body-1-medium --accordion__content">
                                        A customizable payment form is hosted on the gateway provider's server. The
                                        cardholder enters personal data on the merchant's registration page. When
                                        reaching the checkout page, the client is redirected to a 3rd party payment
                                        provider's form and enters their
                                        card details. After the payment is successfully made, they are redirected back
                                        to the merchant's website.
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="lets-start --dark-section">
            <div class="container">
                <div class="content">
                    <div class='signpost body-2 body-2-medium  mobile__body-2'>
                        LET'S GET STARTED
                    </div>
                    <h2 class="lets-start__title title-1 mobile__title-2">
                        Take your business <br class="--pc-display">
                        <span class="title-opacity-white5">to the next level</span>
                    </h2>
                    <a href="Contact-us.html" class='button__blue lets-start__button'>
                        Get started
                    </a>
                </div>
            </div>
            <div class="lets-start__imgbg">
                <div class="section-blur">
                    <span class="blur-item blue-blur"></span>
                    <span class="blur-item pink-blur"></span>
                    <span class="blur-item green-blur"></span>
                    <span class="blur-item pink-blur"></span>
                </div>
                <picture>
                    <source srcset="images/homepage/lets-started-mob.png" media="(max-width: 760px)">
                    <img src="images/homepage/lets-started.png" alt="">
                </picture>
            </div>
        </section>
    </main>
    <footer class="footer">
        <div class="container">
            <div class="footer__inner">
                <div class="footer__column  footer__body2">
                    <div class="footer__subtitle">Contacts</div>

                    <a href="mailto:contact@gumballpay.com">contact@gumballpay.com</a>
                    <a href="tel:+447312221374">+44-7312-221374</a>
                    <div class="footer__contacts-media">
                        <a href="#"><img src="images/footer/media-inst.svg"></a>
                        <a href="#"><img src="images/footer/media-fb.svg"></a>
                        <a href="#"><img src="images/footer/media-linkedin.svg"></a>
                        <a href="#"><img src="images/footer/media-twitter.svg"></a>
                    </div>
                </div>
                <div class="footer__column">
                    <div class="footer__subtitle">Solutions</div>

                    <div class="footer__solutions-items footer__body2">
                        <div>
                            <a href="Payment-processing.html">Payment processing</a>
                            <a href="Global-coverage.html">Global Coverage</a>
                            <a href="Smart-routing.html">Smart routing</a>
                        </div>
                        <div>
                            <a href="Fraud-prevention.html">Fraud & Chargeback prevention</a>

                            <a href="24-7-support.html">24/7 support</a>
                            <a href="Authentication.html">Authentication</a>
                        </div>
                    </div>
                </div>
                <div class="footer__column">
                    <div class="footer__subtitle">Company</div>

                    <div class="footer__company-items footer__body2">
                        <div>
                            <a href="About-us.html">About us</a>
                            <a href="Blog.html">Blog</a>
                        </div>
                        <div>
                            <a href="Contact-us.html">Contact us</a>
                            <a href="FAQ.html">FAQ</a>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="footer__bottom">
            <div class="container">
                <div class="-inner">
                    <p class="copyright link">© GumBallPay, 2022</p>
                    <div class="footer__policy footer__body2">
                        <a href="Terms&Conditions.html">Terms & Conditions</a>
                        <a href="KYC-Policy.html">AML / KYC Policy</a>
                        <a href="KYC-Policy.html">Cookie Policy</a>
                    </div>
                    <div class="footer__createdby footer__body2 link">
                        Created by
                        <a href="https://goodface.agency" target="_blank">Goodface </a>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <div class="cookie-banner">
        <div class="cookie-banner__text">
            <p class="title text-3 mobile__text-2">The website uses cookies</p>
            <div class="text body-2 --weight500 mobile__body-1-medium">
                <p>
                    By using our website, you agree to the&nbsp;fact that we use <a href="KYC-Policy.html">cookies</a>.
                </p>
            </div>
        </div>
        <div class="accept-cookie button__transparent -without-arrow">
            agree
        </div>
    </div>

    <script src="js/lib/jquery-3.6.0.min.js"></script>
    <script src="js/lib/swiper-bundle.min.js"></script>

    <script src="js/custom-solutions.js"></script>
    <script src="js/test.js"></script>
    <script src="js/script.js"></script>
</body>

</html>