<!DOCTYPE html>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="robots" content="max-image-preview:large" />
        <link rel="stylesheet" href="./css/bootstrap.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <link rel="stylesheet" href="./css/all.min.css">
        <link rel="preload" href="./fonts/Inter-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <link rel="preload" href="./fonts/Inter-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <link rel="preload" href="./fonts/Inter-SemiBold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <link rel="preload" href="./fonts/Inter-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
        <link rel="icon" type="image/png" href="./images/heart.png" sizes="96x96" />
        <title>botim</title>
    </head>
    <body>
        <main class="container-fluid">
            <div id="header-placeholder"></div>
            <section class="hero d-flex flex-column overflow-hidden min-vh-100">
                <div class="overlay-gradient position-absolute top-0 start-0 w-100 h-100"></div>
                <div class="container hero-text mt-auto d-flex flex-column justify-content-between flex-grow-1 position-relative text-start text-white">
                    <h3 class="text-start text-lg-center toptitle">simplified by design</h3>
                    <div class="d-flex flex-column">
                        <img id="imgbot" class="mt-4" src="images/bot.png" style="opacity:0;">
                        <h1 class="title pt-5">love talks.  money moves. all on botim.</h1>
                        <p class="subtitle pt-4">call, pay, transfer, and much more – all in <span class="fw-bold">one app.</span></p>
                        <img id="imgheart" src="images/heart.png" style="opacity:0;">
                    </div>
                </div>
                <img id="svghand" src="images/hand.svg">
            </section>

            <section class="container all-in-one">
                <div class="d-flex justify-content-between">
                    <p class="m-0 fw-bold">connect. pay. simplify.</p>
                    <div>
                        <p class="d-inline">download the app</p>
                        <a href="./download-botim.html" class="btn-svg">
                            <svg xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none"><rect width="39" height="39" rx="19.5" fill="#011FE5"></rect><path d="M20.6452 11.9874C20.9161 11.7166 21.2834 11.5645 21.6665 11.5645C22.0495 11.5645 22.4168 11.7166 22.6877 11.9874L29.1877 18.4874C29.4585 18.7582 29.6106 19.1256 29.6106 19.5086C29.6106 19.8916 29.4585 20.2589 29.1877 20.5298L22.6877 27.0298C22.4152 27.2929 22.0504 27.4385 21.6716 27.4352C21.2929 27.4319 20.9306 27.28 20.6628 27.0122C20.395 26.7444 20.2431 26.3821 20.2398 26.0034C20.2365 25.6247 20.3821 25.2598 20.6452 24.9874L24.5553 20.953H10.8331C10.45 20.953 10.0826 20.8008 9.81174 20.53C9.54085 20.2591 9.38867 19.8917 9.38867 19.5086C9.38867 19.1255 9.54085 18.7581 9.81174 18.4872C10.0826 18.2163 10.45 18.0641 10.8331 18.0641H24.5553L20.6452 14.0298C20.3744 13.7589 20.2223 13.3916 20.2223 13.0086C20.2223 12.6256 20.3744 12.2582 20.6452 11.9874Z" fill="white"></path></svg>
                        </a>
                    </div>
                </div>
                <div class="d-flex h-100 justify-content-center align-items-center flex-lg-fill">
                    <h2 class="animated-text greater text-center py-5 my-5">
                        the all-in-one app <span class="text-gray">where everyday connection</span> meets everyday money.
                    </h2>
                </div>
            </section>
            <section class="promo-video px-3 px-lg-0">
                <div class="video-wrapper">
                <video src="images/Botim-4.mp4" autoplay="" playsinline="true" controls="" controlslist="nodownload nofullscreen" loop="" muted="">
                        <p>your browser does not support the video tag.</p>
                    </video>
                </div>
            </section>
            <section class="why">
                <div class="container w-100 pt-lg-5">
                    <h3 class="fadein">why botim?</h3>
                </div>
                <div class="container d-flex flex-column flex-lg-row">
                    <div class="col-12 col-lg-6 d-flex justify-content-start align-items-center">
                        <h2 class="animated-text text-start greater">
                            because life's <span class="text-gray new-line">already complex.</span> your app <span class="text-gray new-line">shouldn't be.</span>
                        </h2>
                    </div>
                    <div class="col-12 col-lg-6 why-cards blocks">
                        <div class="why-card block">
                            <h3>heart to heart.</h3>
                            <p>hd voice, video calls, and chats that just work. stay close across borders, time zones, and moments.</p>
                        </div>
                        <div class="why-card block green-card">
                            <h3>wallet to wallet.</h3>
                            <p>we started with calls. now we power connection, payments, and businesses across cultures, currencies, and communities.</p>
                        </div>
                        <div class="why-card block yellow-card">
                            <h3>and more.</h3>
                            <p>botim does more than you think. visas, ID renewal, national bonds - to name a few. simplified by design. built for everyone.</p>
                        </div>
                    </div>
                </div>
            </section>
            <section class="built container content-block flex-column flex-lg-row px-3 px-lg-0">
                <div class="col-12 col-lg-6 cards order-2 order-lg-1">
                    <div class="built-card connect-card card">
                        <svg class="built-card-main-icon" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none"><g clip-path="url(#clip0_54366_9696)"><path d="M5 3C5 3.53043 4.78929 4.03914 4.41421 4.41421C4.03914 4.78929 3.53043 5 3 5C2.46957 5 1.96086 4.78929 1.58579 4.41421C1.21071 4.03914 1 3.53043 1 3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1C3.53043 1 4.03914 1.21071 4.41421 1.58579C4.78929 1.96086 5 2.46957 5 3ZM5 3H9C10.5913 3 12.1174 3.63214 13.2426 4.75736C14.3679 5.88258 15 7.4087 15 9V21C15 22.5913 15.6321 24.1174 16.7574 25.2426C17.8826 26.3679 19.4087 27 21 27H25M25 27C25 27.5304 25.2107 28.0391 25.5858 28.4142C25.9609 28.7893 26.4696 29 27 29C27.5304 29 28.0391 28.7893 28.4142 28.4142C28.7893 28.0391 29 27.5304 29 27C29 26.4696 28.7893 25.9609 28.4142 25.5858C28.0391 25.2107 27.5304 25 27 25C26.4696 25 25.9609 25.2107 25.5858 25.5858C25.2107 25.9609 25 26.4696 25 27Z" stroke="white"></path></g><defs><clipPath id="clip0_54366_9696"><rect width="30" height="30" fill="white"></rect></clipPath></defs></svg>
                        <p><span class="fs-2 d-block">connection, simplified.</span>call, chat, and stay close,<br/>wherever you are.</p>
                        <a class="btn btn-secondary" href="./connect.html">get started<i class="fas fa-arrow-right"></i></a>
                    </div>
                    <div class="built-card money-card card">
                        <svg class="built-card-main-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none"><path d="M36.8855 9.65618C36.7977 9.60129 36.6973 9.56969 36.5939 9.56436C36.4905 9.55903 36.3874 9.58014 36.2944 9.62571C29.5349 12.9285 24.7513 11.399 19.6889 9.77806C14.6265 8.15712 9.37371 6.47677 2.16938 9.99438C2.06682 10.0446 1.98044 10.1227 1.92011 10.2197C1.85977 10.3166 1.8279 10.4286 1.82813 10.5428V28.8241C1.82792 28.9276 1.85411 29.0295 1.90422 29.1202C1.95433 29.2108 2.02671 29.2872 2.11453 29.342C2.20235 29.3969 2.30271 29.4285 2.40613 29.4339C2.50955 29.4392 2.61263 29.4181 2.70563 29.3725C9.46512 26.0697 14.2487 27.5992 19.3111 29.2202C22.1843 30.1342 25.1123 31.0772 28.4213 31.0772C30.9517 31.0772 33.7061 30.5288 36.8276 29.0038C36.9301 28.9536 37.0165 28.8755 37.0769 28.7786C37.1372 28.6816 37.1691 28.5696 37.1688 28.4554V10.1741C37.1694 10.0709 37.1436 9.96916 37.0941 9.87856C37.0445 9.78795 36.9727 9.71143 36.8855 9.65618ZM35.9531 28.0715C29.3734 31.1595 24.6645 29.6528 19.6859 28.0593C16.8127 27.1452 13.8846 26.2038 10.5757 26.2038C8.29055 26.2038 5.81039 26.6608 3.04688 27.8704V10.9267C9.6266 7.83872 14.3355 9.3454 19.3141 10.9389C24.177 12.4913 29.1997 14.1016 35.9531 11.1278V28.0715ZM19.5 15.2335C18.6563 15.2335 17.8316 15.4837 17.1301 15.9524C16.4287 16.4211 15.8819 17.0873 15.5591 17.8667C15.2362 18.6462 15.1517 19.5038 15.3163 20.3313C15.4809 21.1587 15.8872 21.9188 16.4838 22.5154C17.0803 23.1119 17.8404 23.5182 18.6678 23.6828C19.4953 23.8474 20.3529 23.7629 21.1324 23.44C21.9118 23.1172 22.578 22.5704 23.0467 21.869C23.5155 21.1675 23.7656 20.3428 23.7656 19.4991C23.7656 18.3678 23.3162 17.2828 22.5163 16.4829C21.7163 15.6829 20.6313 15.2335 19.5 15.2335ZM19.5 22.546C18.8974 22.546 18.3083 22.3673 17.8073 22.0325C17.3062 21.6977 16.9157 21.2218 16.6851 20.6651C16.4544 20.1084 16.3941 19.4957 16.5117 18.9047C16.6292 18.3137 16.9194 17.7708 17.3455 17.3446C17.7717 16.9185 18.3146 16.6283 18.9056 16.5108C19.4966 16.3932 20.1092 16.4536 20.666 16.6842C21.2227 16.9148 21.6986 17.3053 22.0334 17.8064C22.3682 18.3074 22.5469 18.8965 22.5469 19.4991C22.5469 20.3072 22.2259 21.0822 21.6545 21.6536C21.0831 22.225 20.3081 22.546 19.5 22.546ZM7.92188 14.6241V21.9366C7.92188 22.0982 7.85767 22.2532 7.74339 22.3675C7.62911 22.4818 7.47412 22.546 7.3125 22.546C7.15089 22.546 6.99589 22.4818 6.88161 22.3675C6.76733 22.2532 6.70313 22.0982 6.70313 21.9366V14.6241C6.70313 14.4625 6.76733 14.3075 6.88161 14.1932C6.99589 14.0789 7.15089 14.0147 7.3125 14.0147C7.47412 14.0147 7.62911 14.0789 7.74339 14.1932C7.85767 14.3075 7.92188 14.4625 7.92188 14.6241ZM31.0781 24.3741V17.0616C31.0781 16.9 31.1423 16.745 31.2566 16.6307C31.3709 16.5164 31.5259 16.4522 31.6875 16.4522C31.8491 16.4522 32.0041 16.5164 32.1184 16.6307C32.2327 16.745 32.2969 16.9 32.2969 17.0616V24.3741C32.2969 24.5357 32.2327 24.6907 32.1184 24.805C32.0041 24.9193 31.8491 24.9835 31.6875 24.9835C31.5259 24.9835 31.3709 24.9193 31.2566 24.805C31.1423 24.6907 31.0781 24.5357 31.0781 24.3741Z" fill="#FFFBFB"></path></svg>
                        <p><span class="fs-2 d-block">money, simplified.</span>send, spend, and save in the language that makes sense to you.</p>
                        <a class="btn btn-secondary" href="./money.html">get started<i class="fas fa-arrow-right"></i></a>
                    </div>
                    <div class="built-card more-card card">
                        <svg class="built-card-main-icon" xmlns="http://www.w3.org/2000/svg" width="35" height="29" viewBox="0 0 35 29" fill="none"><path d="M4.69333 28.3327C3.92556 28.3327 3.285 28.076 2.77167 27.5627C2.25833 27.0494 2.00111 26.4082 2 25.6394V9.35935C2 8.59158 2.25722 7.95102 2.77167 7.43769C3.28611 6.92435 3.92611 6.66713 4.69167 6.66602H12V4.35769C12 3.59102 12.2572 2.95046 12.7717 2.43602C13.2861 1.92157 13.9267 1.66491 14.6933 1.66602H19.3083C20.075 1.66602 20.7156 1.92269 21.23 2.43602C21.7444 2.94935 22.0011 3.58991 22 4.35769V6.66602H29.3083C30.075 6.66602 30.715 6.92324 31.2283 7.43769C31.7417 7.95213 31.9989 8.59269 32 9.35935V25.641C32 26.4077 31.7428 27.0482 31.2283 27.5627C30.7139 28.0771 30.0739 28.3338 29.3083 28.3327H4.69333ZM13.6667 6.66602H20.3333V4.35769C20.3333 4.10213 20.2267 3.86713 20.0133 3.65269C19.8 3.43824 19.565 3.33157 19.3083 3.33269H14.6917C14.4361 3.33269 14.2011 3.43935 13.9867 3.65269C13.7722 3.86602 13.6656 4.10102 13.6667 4.35769V6.66602ZM30.3333 19.166H20.3333V20.3194C20.3333 20.706 20.2056 21.0271 19.95 21.2827C19.6944 21.5382 19.3733 21.666 18.9867 21.666H15.0133C14.6267 21.666 14.3056 21.5382 14.05 21.2827C13.7944 21.0271 13.6667 20.706 13.6667 20.3194V19.166H3.66667V25.641C3.66667 25.8966 3.77333 26.1316 3.98667 26.346C4.2 26.5605 4.435 26.6671 4.69167 26.666H29.3083C29.5639 26.666 29.7989 26.5594 30.0133 26.346C30.2278 26.1327 30.3344 25.8971 30.3333 25.6394V19.166ZM15.3333 19.9994H18.6667V16.666H15.3333V19.9994ZM3.66667 17.4994H13.6667V16.346C13.6667 15.9594 13.7944 15.6382 14.05 15.3827C14.3056 15.1271 14.6267 14.9994 15.0133 14.9994H18.9867C19.3733 14.9994 19.6944 15.1271 19.95 15.3827C20.2056 15.6382 20.3333 15.9594 20.3333 16.346V17.4994H30.3333V9.35935C30.3333 9.10269 30.2267 8.86713 30.0133 8.65269C29.8 8.43824 29.565 8.33157 29.3083 8.33269H4.69167C4.43611 8.33269 4.20111 8.43935 3.98667 8.65269C3.77222 8.86602 3.66556 9.10158 3.66667 9.35935V17.4994Z" fill="white"></path></svg>
                        <p><span class="fs-2 d-block">business, simplified.</span>send invoices, pay teams, and manage everything in one place.</p>
                        <a class="btn btn-secondary" href="./more.html">get started<i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                <div class="col-12 col-lg-6 d-flex align-items-start justify-content-start order-1 order-lg-2">
                    <h2 class="animated-text text-start greater"><span class="text-gray">built for the</span><span class="text-gray new-line">way you live.</span>simplified by design.</h2>
                </div>
            </section>
            <section class="this-is-botim">
                <h2 class="animated-text greater text-center">this is botim. <span class="text-gray new-line">simplified by design.</span>and we're only getting<br/>started</h2>
                <a class="link d-flex align-items-center" href="./download-botim.html">
                    <span class="pe-3">download the app</span>
                    <svg class="all-in-one-icon" xmlns="http://www.w3.org/2000/svg" width="39" height="39" viewBox="0 0 39 39" fill="none"><rect width="39" height="39" rx="19.5" fill="#011FE5"></rect><path d="M20.6452 11.9874C20.9161 11.7166 21.2834 11.5645 21.6665 11.5645C22.0495 11.5645 22.4168 11.7166 22.6877 11.9874L29.1877 18.4874C29.4585 18.7582 29.6106 19.1256 29.6106 19.5086C29.6106 19.8916 29.4585 20.2589 29.1877 20.5298L22.6877 27.0298C22.4152 27.2929 22.0504 27.4385 21.6716 27.4352C21.2929 27.4319 20.9306 27.28 20.6628 27.0122C20.395 26.7444 20.2431 26.3821 20.2398 26.0034C20.2365 25.6247 20.3821 25.2598 20.6452 24.9874L24.5553 20.953H10.8331C10.45 20.953 10.0826 20.8008 9.81174 20.53C9.54085 20.2591 9.38867 19.8917 9.38867 19.5086C9.38867 19.1255 9.54085 18.7581 9.81174 18.4872C10.0826 18.2163 10.45 18.0641 10.8331 18.0641H24.5553L20.6452 14.0298C20.3744 13.7589 20.2223 13.3916 20.2223 13.0086C20.2223 12.6256 20.3744 12.2582 20.6452 11.9874Z" fill="white"></path></svg>
                </a>
            </section>
            <div id="footer-placeholder"></div>
        </main>
        <script src="./js/bootstrap.bundle.min.js"></script>
        <script src="./js/gsap.min.js"></script>
        <script src="./js/ScrollTrigger.min.js"></script>
        <script src="./js/SplitText.min.js"></script>
        <script src="./js/script.js" defer></script>
        <script>
            window.addEventListener('load', () => {
                const videos = document.querySelectorAll('video');

                videos.forEach(video => {
                const source = video.querySelector('source[data-src]');
                if (source) {
                    source.src = source.dataset.src; 
                    video.load();                       
                    video.play().catch(err => {
                    console.warn('Autoplay blocked:', err);
                    });
                }
                });
            });
        </script>
    </body>
</html>