<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

<title>BLUE AI</title>

<!-- Fav Icon -->
<link rel="icon" href="../static/images/favicon.ico" type="image/x-icon">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

<!-- Stylesheets -->
<link href="../static/css/font-awesome-all.css" rel="stylesheet">
<link href="../static/css/flaticon.css" rel="stylesheet">
<link href="../static/css/owl.css" rel="stylesheet">
<link href="../static/css/bootstrap.css" rel="stylesheet">
<link href="../static/css/jquery.fancybox.min.css" rel="stylesheet">
<link href="../static/css/animate.css" rel="stylesheet">
<link href="../static/css/nice-select.css" rel="stylesheet">
<link href="../static/css/elpath.css" rel="stylesheet">
<link href="../static/css/color/theme-color.css" id="jssDefault" rel="stylesheet">
<link href="../static/css/switcher-style.css" rel="stylesheet">
<link href="../static/css/rtl.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<link href="../static/css/module-css/page-title.css" rel="stylesheet">
<link href="../static/css/module-css/contact.css" rel="stylesheet">
<link href="../static/css/module-css/subscribe.css" rel="stylesheet">
<link href="../static/css/responsive.css" rel="stylesheet">

</head>


<!-- page wrapper -->
<body>

    <div class="boxed_wrapper ltr">



        <!-- preloader -->
        <div class="loader-wrap">
            <div class="preloader">
                <div class="preloader-close">close</div>
                <div id="handle-preloader" class="handle-preloader">
                    <div class="animation-preloader">
                        <div class="spinner"></div>
                        <div class="txt-loading">
                            <span data-text-preloader="b" class="letters-loading">
                                b
                            </span>
                            <span data-text-preloader="l" class="letters-loading">
                                l
                            </span>
                            <span data-text-preloader="u" class="letters-loading">
                                u
                            </span>
                            <span data-text-preloader="e" class="letters-loading">
                                e
                            </span>
                            <span data-text-preloader="a" class="letters-loading">
                                a
                            </span>
                            <span data-text-preloader="i" class="letters-loading">
                                i
                            </span>
                        </div>
                    </div>  
                </div>
            </div>
        </div>
        <!-- preloader end -->


        <!-- page-direction -->
        <div class="page_direction">
            <div class="demo-rtl direction_switch"><button class="rtl">RTL</button></div>
            <div class="demo-ltr direction_switch"><button class="ltr">LTR</button></div>
        </div>
        <!-- page-direction end -->


        <!-- switcher menu -->
        <div class="switcher">
            <div class="switch_btn">
                <button><i class="fas fa-palette"></i></button>
            </div>
            <div class="switch_menu">
                <!-- color changer -->
                <div class="switcher_container">
                    <ul id="styleOptions" title="switch styling">
                        <li>
                            <a href="javascript: void(0)" data-theme="theme-color" class="theme-color"></a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" data-theme="pink" class="pink-color"></a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" data-theme="violet" class="violet-color"></a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" data-theme="crimson" class="crimson-color"></a>
                        </li>
                        <li>
                            <a href="javascript: void(0)" data-theme="orange" class="orange-color"></a>
                        </li>
                    </ul>
                </div> 
            </div>
        </div>
        <!-- end switcher menu -->

        <!-- main header -->
        <header class="main-header">
            <!-- header-top -->
            <div class="header-top">
                <div class="large-container">
                    <div class="top-inner">
                        <ul class="links-list clearfix">
                        </ul>
                        <ul class="info-list clearfix"> 
                        {% if session['userName'] %}
                            <li>
                                <i class="icon-1"></i>
                                <a href="mailto:{{session['userName']}}">{{session['userName']}}</a>
                            </li>
                        {% endif %}
                        </ul>
                    </div>
                </div>
            </div>
            <!-- header-lower -->
            <div class="header-lower">
                <div class="large-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <div class="shape"></div>
                            <figure class="logo"><a href="/"><img src="../static/images/logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <!--Mobile Navigation Toggler-->
                            <div class="mobile-nav-toggler">
                                <i class="icon-bar"></i>
                                <i class="icon-bar"></i>
                                <i class="icon-bar"></i>
                            </div>
                            <nav class="main-menu navbar-expand-md navbar-light clearfix">
                                <div class="collapse navbar-collapse show clearfix" id="navbarSupportedContent">
                                    <ul class="navigation clearfix">
                                        <li><a href="index.html">Home</a>
                                        </li>
                                        <li><a href="newGame.html">Play</a></li> 
                                        <li><a href="leaderboard.html">Leaderboard</a></li>
                                        <li><a href="about.html">About</a></li>
                                        <li class="current"><a href="contact.html">Contact</a></li> 
                                    </ul>
                                </div>
                            </nav>
                            <div class="menu-right-content ml_70">
                                <a href="/login" class="theme-btn btn-two mr_20">Login</a>
                                <a href="/register" class="theme-btn btn-one">Register Your Team</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!--sticky Header-->
            <div class="sticky-header">
                <div class="large-container">
                    <div class="outer-box">
                        <div class="logo-box">
                            <div class="shape"></div>
                            <figure class="logo"><a href="/"><img src="../static/images/logo.png" alt=""></a></figure>
                        </div>
                        <div class="menu-area">
                            <nav class="main-menu clearfix">
                                <!--Keep This Empty / Menu will come through Javascript-->
                            </nav>
                            <div class="menu-right-content ml_70">
                                <a href="login.html" class="theme-btn btn-two mr_20">Login</a>
                                <a href="register.html" class="theme-btn btn-one">Register Your Team</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- main-header end -->


        <!-- Mobile Menu  -->
        <div class="mobile-menu">
            <div class="menu-backdrop"></div>
            <div class="close-btn"><i class="fas fa-times"></i></div>
            
            <nav class="menu-box">
                <div class="nav-logo"><a href="/"><img src="../static/images/logo.png" alt="" title=""></a></div>
                <div class="menu-outer"><!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header--></div>
                <div class="contact-info">
                    <h4>Contact Info</h4>
                    <ul>
                        <li>Chicago 12, Melborne City, USA</li>
                        <li><a href="tel:+8801682648101">+88 01682648101</a></li>
                        <li><a href="mailto:attul@redoctopusinnovation.com">attul@redoctopusinnovation.com</a></li>
                    </ul>
                </div>
                <div class="social-links">
                    <ul class="clearfix">
                        <li><a href="/"><span class="fab fa-twitter"></span></a></li>
                        <li><a href="/"><span class="fab fa-facebook-square"></span></a></li>
                        <li><a href="/"><span class="fab fa-pinterest-p"></span></a></li>
                        <li><a href="/"><span class="fab fa-instagram"></span></a></li>
                        <li><a href="/"><span class="fab fa-youtube"></span></a></li>
                    </ul>
                </div>
            </nav>
        </div><!-- End Mobile Menu -->


        <!-- page-title -->
        <section class="page-title centred">
            <div class="bg-layer" style="background-image: url(../static/images/background/page-title.jpg);"></div>
            <div class="pattern-layer">
                <div class="pattern-1" style="background-image: url(../static/images/shape/shape-18.png);"></div>
                <div class="pattern-2" style="background-image: url(../static/images/shape/shape-17.png);"></div>
            </div>
            <div class="auto-container">
                <div class="content-box">
                    <h1>Contact Details</h1>
                    <ul class="bread-crumb clearfix">
                        <li><a href="/">Home</a></li>
                        <li>Contact Us</li>
                    </ul>
                </div>
            </div>
        </section>
        <!-- page-title end -->


        <!-- contact-info-section -->
        <section class="contact-info-section centred pt_120 pb_90">
            <div class="auto-container">
                <div class="sec-title mb_70">
                    <h6>Contact US</h6>
                    <h2>Contact Details</h2>
                </div>
                <div class="row clearfix">
                    <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                        <div class="info-block-one wow fadeInUp animated" data-wow-delay="00ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-2"></i></div>
                                <h3>Our Location</h3>
                                <p>London <br />UK, England</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                        <div class="info-block-one wow fadeInUp animated" data-wow-delay="300ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-43"></i></div>
                                <h3>Email Address</h3>
                                <p><a href="mailto:attul@redoctopusinnovation.com">attul@redoctopusinnovation.com</a></p>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4 col-md-6 col-sm-12 info-column">
                        <div class="info-block-one wow fadeInUp animated" data-wow-delay="600ms" data-wow-duration="1500ms">
                            <div class="inner-box">
                                <div class="icon-box"><i class="icon-44"></i></div>
                                <h3>Phone Number</h3>
                                <p>Emergency Cases <br /><a href="tel:9999999999">+(44) 999-9999</a> (24/7)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- contact-info-section end -->


        <!-- google-map-section -->
        <section class="google-map-section pb_120">
            <div class="auto-container">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d158857.83988566254!2d-0.2664005785522578!3d51.52873980533456!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47d8a00baf21de75%3A0x52963a5addd52a99!2sLondon%2C%20UK!5e0!3m2!1sen!2sca!4v1725547831926!5m2!1sen!2sca" width="600" height="535" frameborder="0" style="border:0; width: 100%" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
            </div>
        </section>
        <!-- google-map-section end -->


        <!-- contact-section -->
        <section class="contact-section pt_120 pb_120">
            <div class="auto-container">
                <div class="sec-title centred mb_70">
                    <h6>Contact US</h6>
                    <h2>Contact Details</h2>
                </div>
                <div class="form-inner">
                    <form method="post" action="sendemail.php" id="contact-form" class="default-form"> 
                        <div class="row clearfix">
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                <input type="text" name="username" placeholder="Your Name" required="">
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                <input type="email" name="email" placeholder="Your email" required="">
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                <input type="text" name="phone" required="" placeholder="Phone">
                            </div>
                            <div class="col-lg-6 col-md-6 col-sm-12 form-group">
                                <input type="text" name="subject" required="" placeholder="Subject">
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group">
                                <textarea name="message" placeholder="Type message"></textarea>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 form-group message-btn centred">
                                <button class="theme-btn btn-one" type="submit" name="submit-form">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- contact-section end -->




        <!-- main-footer -->
        <footer class="main-footer">
            <div class="widget-section">
                <div class="pattern-layer">
                    <div class="pattern-1" style="background-image: url(../static/images/shape/shape-8.png);"></div>
                    <div class="pattern-2" style="background-image: url(../static/images/shape/shape-9.png);"></div>
                </div>
                <div class="auto-container">
                    <div class="row clearfix">
                        <div class="col-lg-3 col-md-6 col-sm-12 footer-column">
                            <div class="footer-widget logo-widget">
                                <figure class="footer-logo"><a href="/"><img src="../static/images/logo-2.png" alt=""></a></figure>
                                <p>Blue AI presents GAIM. The ultimate marketing simulation tool</p>
                                <ul class="social-links">
                                    <li><a href="/"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="/"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="/"><i class="fab fa-instagram"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom centred">
                <div class="auto-container">
                    <div class="copyright"><p>Copyright 2024 by <a href="/">Blue AI</a>. All Right Reserved.</p></div>
                </div>
            </div>
        </footer>
        <!-- main-footer end -->


        <!--Scroll to top-->
        <div class="scroll-to-top">
            <div>
                <div class="scroll-top-inner">
                    <div class="scroll-bar">
                        <div class="bar-inner"></div>
                    </div>
                    <div class="scroll-bar-text">Go To Top</div>
                </div>
            </div>
        </div>
        <!-- Scroll to top end -->
        
    </div>


    <!-- jequery plugins -->
    <script src="../static/js/jquery.js"></script>
    <script src="../static/js/bootstrap.min.js"></script>
    <script src="../static/js/owl.js"></script>
    <script src="../static/js/wow.js"></script>
    <script src="../static/js/validation.js"></script>
    <script src="../static/js/jquery.fancybox.js"></script>
    <script src="../static/js/appear.js"></script>
    <script src="../static/js/isotope.js"></script>
    <script src="../static/js/parallax-scroll.js"></script>
    <script src="../static/js/jquery.nice-select.min.js"></script>
    <script src="../static/js/jQuery.style.switcher.min.js"></script>

    <!-- main-js -->
    <script src="../static/js/script.js"></script>

</body><!-- End of .page_wrapper -->
</html>