
<!DOCTYPE html>
<html lang="tr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Growwy AI</title>
    <link rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0">
    <link rel="stylesheet" href="growwybot/ai.css">

</head>

<body>
    

    <button id="chatbot-toggler">
        <span class="material-symbols-rounded">mode_comment</span>
        <span class="material-symbols-rounded">keyboard_arrow_right</span>
    </button>



    <!-- Chatbot Popup -->
    <div class="chatbot-popup">
        <!-- Mesaj Section -->
        <div id="Mesaj" class="page">

            <div class="chat-header" id="show1" style="display: none; ">
                <div class="header-info-growwy">
                    <h2 class="logo-text-grw">Mesajlar</h2>
                </div>
                <button id="close-chatbot" class="material-symbols-rounded">keyboard_arrow_down</button>
            </div>

            <div class="chat-header" id="show2" style="display: block; ">
                <div class="header-info">
                    <div class="image-container">
                        <img src="growwybot/images/image.png" class="bot-avatar" alt="Bot Avatar">
                    </div>
                    <h2 class="logo-text">Growwy Bot <br> <span
                            style="color: rgb(137, 137, 137); font-weight: 400; font-size: 0.8rem;">Aktif</span> </h2>
                </div>
                <button id="close-chatbot" class="material-symbols-rounded">keyboard_arrow_down</button>
            </div>

            <style>
                /* Default padding for both headers */
                .chat-header {
                    padding: 15px;
                }

                /* Media query for mobile view */
                @media (max-width: 768px) {
                    #show1 {
                        padding: 18px;
                        /* Change padding for show1 in mobile view */
                    }
                }
            </style>





            <div class="chat-body">
                <div class="image-wrapper2">
                    <img src="growwybot/images/128-6a5eabbb84cc2b038b2afc6698ca0a974faf7adc9ea9f0fb3c3e78ac12543bc5.png" alt="Resim"
                        class="image-box">
                    <p class="image-caption2">Growwy AI anında cevap verir</p>
                    <p class="image-caption3">Gerekirse ekibi isteyin</p>
                </div>





                <div class="message bot-message" style="margin-top: 8px;">
                    <img src="growwybot/images/128-6a5eabbb84cc2b038b2afc6698ca0a974faf7adc9ea9f0fb3c3e78ac12543bc5.png" width="30px"
                        height="auto" style="margin-top: 127px;">
                    <div class="message-text">Hi arda, welcome to Intercom 👋 <span>
                        You are now speaking with Fin AI Agent. I can do much more than chatbots you've seen before. Tell me as much as you can about your question and I'll do my best to help you in an instant.</span></div>
                </div>
            </div>

            <div class="chat-footer">
                <form action="#" class="chat-form">
                    <textarea placeholder="Mesaj..." class="message-input" required></textarea>
                    <div class="chat-controls">
                        <button type="button" id="emoji-picker"
                            class="material-symbols-outlined">sentiment_satisfied</button>
                        <div class="file-upload-wrapper">
                            <input type="file" accept="image/*" id="file-input" hidden />
                            <img src="#" />
                            <button type="button" id="file-upload" class="material-symbols-rounded">attach_file</button>
                            <button type="button" id="file-cancel" class="material-symbols-rounded">close</button>
                        </div>

                        <button type="submit" id="send-message" class="material-symbols-rounded">arrow_upward</button>
                    </div>
                </form>
            </div>
        </div>



        <!-- Ana Sayfa Section -->
        <div id="Anasayfa" class="page active" 
            style="display:none; width: 100%; height: 60%; background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) 100%), url('growwybot/images/Untitled image (12).jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; position: relative; top: 0; left: 0; ">


            <div class="chat-body2">
                <div class="chat-header-grw">
                    <div class="header-info">
                        <div class="image-container">
                            <img src="growwybot/images/image.png" class="bot-avatar" style="width: 35px; height: auto;">
                        </div>
                    </div>
                    <button id="close-chatbot" class="material-symbols-rounded">keyboard_arrow_down</button>

                </div>

                <BR><BR></BR>
                <div class="help-section">
                    <h2 style="margin-left: 7px;"> <span style="color: rgb(180, 180, 180);"> Nasıl yardımcı olabiliriz?
                        </span><br> Bizimle konuşun</h2>
                </div>

                <div class="message-container">
                    <div class="message-card" style="padding: 15px;">
                        <div class="message-header" style="  margin-bottom: 8px;">Geçmiş Mesajlar</div>
                        <div class="message-content">
                            <img src="growwybot/images/128-6a5eabbb84cc2b038b2afc6698ca0a974faf7adc9ea9f0fb3c3e78ac12543bc5.png"
                                alt="Profile Image" class="profile-image">
                            <div class="message-text">
                                <p class="message" style="font-weight: 360;">Merhaba! Nasıl yardımcı olab...</p>
                                <p class="sender-info">Growwy Bot • Şimdi</p>
                            </div>
                            <div class="right-image">
                                <img src="growwybot/images/Untitled image (39).png">
                            </div>
                        </div>
                    </div>
                    <a
                        href="https://api.whatsapp.com/send/?phone=%2B905510656008&text=test&type=phone_number&app_absent=0">
                        <div class="message-card" style="margin-top: 9px;">
                            <div class="message-content">
                                <div class="message-text">
                                    <p class="message-header">Bir soru sorun</p>
                                    <p class="sender-info">Growwy Bot size yardımcı olabilir </p>
                                </div>
                                <div class="right-image">
                                    <img src="growwybot/images/Untitled image (39).png">
                                </div>
                            </div>
                        </div>
                    </a>

                    <div class="container" style="margin-top: 10px;">
                        <div class="image-section">
                            <img src="growwybot/images/Fin2-Messenger-Banner-Squinge.jpg">
                        </div>
                        <div class="divider2"></div>
                        <a href="https://www.youtube.com">
                            <div class="text-section2">
                                <h1>Meet Fin 2—the first AI Agent that delivers human-quality service</h1>
                                <p>Fin 2 can handle all of your frontline support. It uses knowledge, behavior, actions
                                    and insights to deliver the highest quality customer support, 24/7. Hire Fin 2 today
                                    and free your team for higher impact work.</p>
                            </div>
                        </a>
                    </div>
                    <div class="container" style="margin-top: 10px;">
                        <div class="image-section">
                            <img src="growwybot/images/Join the New Intercom Community.png">
                        </div>
                        <div class="divider2"></div>
                        <a href="https://www.youtube.com">
                            <div class="text-section2">
                                <h1>Meet Fin 2—the first AI Agent that delivers human-quality service</h1>
                                <p>Fin 2 can handle all of your frontline support. It uses knowledge, behavior, actions
                                    and insights to deliver the highest quality customer support, 24/7. Hire Fin 2 today
                                    and free your team for higher impact work.</p>
                            </div>
                        </a>
                    </div>

                    <div class="message-card2" style="margin-top: 10px;">
                        <div class="message-content2">
                            <a href="https://api.whatsapp.com/send/?phone=%2B905510656008&text=test&type=phone_number&app_absent=0"
                                class="link">
                                <div class="message-text2 highlight" style="position: relative;">
                                    90% İndirimli Agency Paketi
                                    <div class="right-image">
                                        <img src="growwybot/images/Untitled image (35).png">
                                    </div>
                                </div>
                            </a>
                            <a href="https://api.whatsapp.com/send/?phone=%2B905510656008&text=test&type=phone_number&app_absent=0"
                                class="link">
                                <div class="message-text2 highlight" style="position: relative;">
                                    Hizmetlerimiz
                                    <div class="right-image">
                                        <img src="growwybot/images/Untitled image (35).png">
                                    </div>
                                </div>
                            </a>
                            <a href="https://api.whatsapp.com/send/?phone=%2B905510656008&text=test&type=phone_number&app_absent=0"
                                class="link">
                                <div class="message-text2 highlight" style="position: relative;">
                                    Hakkımızda
                                    <div class="right-image">
                                        <img src="growwybot/images/Untitled image (35).png">
                                    </div>
                                </div>
                            </a>
                            <a href="https://api.whatsapp.com/send/?phone=%2B905510656008&text=test&type=phone_number&app_absent=0"
                                class="link">
                                <div class="message-text22" style="position: relative;">
                                    Whatsapp Destek
                                    <div class="right-image">
                                        <img src="growwybot/images/Untitled image (35).png">
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>

                    <div class="container" style="margin-top: 10px;">
                        <div class="image-section">
                            <img src="growwybot/images/operator-message-video.png">
                        </div>
                        <div class="divider2"></div>
                        <a href="https://www.youtube.com">
                            <div class="text-section2">
                                <h1>Meet Fin 2—the first AI Agent that delivers human-quality service</h1>
                                <p>Fin 2 can handle all of your frontline support. It uses knowledge, behavior, actions
                                    and insights to deliver the highest quality customer support, 24/7. Hire Fin 2 today
                                    and free your team for higher impact work.</p>
                            </div>
                        </a>
                    </div>


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

        <!-- Yardım Section -->
        <div id="Yardim" class="page">
            <div class="chat-header-growwy">
                <div class="header-info-growwy">
                    <h2 class="logo-text-grw">Yardım</h2>
                </div>
                <button id="close-chatbot-grw" class="material-symbols-rounded"
                    style="margin-top: -5px;">keyboard_arrow_down</button>

                <!-- Arama Çubuğu header info'nun altında -->
                <div class="search-bar">
                    <input type="text" placeholder="Yardım arayın" />
                    <button type="submit">
                        <img src="growwybot/images/Untitled image (41).png" class="search-icon" />
                    </button>
                </div>
            </div>




            <div class="chat-body">
                <p class="collections" style="margin-left: 5px;">8 collections</p>

                <div class="collection-item">
                    <div class="gri-çizgi" style="margin-bottom: 15px;"></div>

                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>


                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>
                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                    <div class="divider"></div>
                    <a href="your-link-here" class="button-container">
                        <div class="content">
                            <h3>How To Stop Hackers</h3>
                            <p>General Information about TRW (The Real World) <br> and HU (Hustler's University)</p>
                            <div class="articles-count">6 articles</div>
                        </div>
                        <img src="growwybot/images/Untitled image (39).png" alt="icon" class="right-icon"> <!-- Sağda 20x20 px resim -->
                    </a>

                </div>




            </div>
        </div>





        <!-- iletişim Section -->
        <div id="iletişim" class="page">
            <div class="chat-header-growwy">
                <div class="header-info-growwy">
                    <h2 class="logo-text-grw">Haberler</h2>
                </div>
                <button id="close-chatbot-grw" class="material-symbols-rounded"
                    style="margin-top: -5px;">keyboard_arrow_down</button>

                <!-- Arama Çubuğu header info'nun altında -->

            </div>



            <div class="chat-body3">
                <p class="collections" style="margin-left: 5px;">Team Growwy'den <br> <span
                        style="font-weight: 300; font-size: 13.8px; line-height: 20px;">En Son Haberler</span></p>

                <div class="collection-item">

                    <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>


                    <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/Holistic Overview.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>
                   <div class="container3" style="margin-top: 15px; margin-right: 5px;">
                        <div class="image-section3">
                            <img src="growwybot/images/image copy.png">
                            <div class="feature-section">
                                <span>AI Agent</span>
                            </div>
                            <div class="feature-section" style="margin-left: 7px;">
                                <span>New Feature</span>
                            </div>
                        </div>
                        <a href="https://www.youtube.com">
                            <div class="text-section3" style="display: flex; align-items: center; margin-top: -20px;">
                                <div>
                                    <h1>Fin now speaks in your preferred tone of voice</h1>
                                    <p>Fin can incorporate your tone of voice preferences, allowing you to choose from
                                        ...</p>
                                </div>
                                <div>
                                    <img src="growwybot/images/Untitled image (39).png" alt="Icon"
                                        style="width: 9px; height: auto; margin-left: 10px; margin-top: 25px; margin-right: 10px;">
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="caught-up">
                        <div class="checkmark"></div>
                        <p>Sona Ulaştınız</p>
                      </div></div>

                      <style>

.caught-up {
  display: flex;
  flex-direction: column; /* Dikey hizalama */
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 16px;
  color: #808080;
  background-color: #ffffff;
  border-radius: 8px;
  padding: 20px;
  width: 250px;
  margin: 20px auto;
  text-align: center;
}

.checkmark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e0e0e0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: #808080;
  margin-bottom: 10px; /* Ok işareti ile yazı arasındaki mesafe */
}

.checkmark::after {
  content: '\2713'; /* Checkmark symbol */
  font-size: 20px;
  color: #808080;
}

.caught-up p {
 
    font-size: 15px;
    color: #808080;
}
                      </style>


            

        </div>
    </div>
    <!-- Bottom Navigation -->
    <div class="bottom-nav">
        <div class="nav-item" id="home-nav">
            <span class="material-symbols-rounded">home</span>
            <span class="nav-text">Anasayfa</span>
        </div>
        <div class="nav-item" id="messages-nav">
            <span class="material-symbols-rounded">message</span>
            <span class="nav-text">Mesajlar</span>
        </div>
        <div class="nav-item" id="help-nav">
            <span class="material-symbols-rounded">help</span>
            <span class="nav-text">Yardım</span>
        </div>
        <div class="nav-item" id="iletisim-nav">
            <span class="material-symbols-rounded">announcement</span>
            <span>Haberler</span>
        </div>
    </div>
    </div>




    <script src="growwybot/growwylicence.js"></script>
    <script src="growwybot/script.js"></script>


</body>

</html>