index.html

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

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>iCity Demonstrator</title>
    <meta content="" name="description">

    <meta content="" name="keywords">

    <!-- Favicons -->
    <link href="assets/img/logo_fav.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Nunito:300,300i,400,400i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <!-- Vendor CSS Files -->
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/aos/aos.css" rel="stylesheet">
    <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">

    <!-- Template Main CSS File -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- =======================================================
  * Template Name: FlexStart - v1.4.0
  * Template URL: https://bootstrapmade.com/flexstart-bootstrap-startup-template/
  * Author: BootstrapMade.com
  * License: https://bootstrapmade.com/license/
  ======================================================== -->
</head>

<body>

    <!-- ======= Header ======= -->
    <header id="header" class="header fixed-top">
        <!-- <div class="container-fluid container-xl d-flex align-items-center justify-content-between"> -->

        <div class="row">
            <div class="col-lg-1 col-md-2 col-sm-2 ">
                <img src="assets/img/dummy.png" alt="">
            </div>
            <div class="col-lg-5 col-md-4 col-sm-4">
                <a href="index.html" class="logo d-flex align-items-center">
                    <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg" alt="">
                    <span>City Demonstrator</span>
                </a>
            </div>

            <div class="col-lg-5 col-md-4 col-sm-4 ">
                <span style="float: right; margin-top: 10px;">
                        <img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 160px; padding-right:20px;" alt=" ">
                    
                        <img src="assets/img/icityLogo.jpg " style="width: 130px;  " alt=" ">
                    </span>

            </div>
            <div class="col-lg-1 col-md-2 col-sm-1">
                <img src="assets/img/dummy.png" alt="">
            </div>
        </div>
        <!--    <nav id="navbar " class="navbar ">
                 <ul> 
                    <li><a class="nav-link scrollto active " href="#hero ">Home</a></li>
                    <li><a class="nav-link scrollto " href="#about ">About</a></li>
                    <li><a class="nav-link scrollto " href="#services ">Services</a></li>
                    <li><a class="nav-link scrollto " href="#portfolio ">Portfolio</a></li>
                    <li><a class="nav-link scrollto " href="#team ">Team</a></li>
                    <li><a href="blog.html ">Blog</a></li>
                    <li class="dropdown "><a href="# "><span>Drop Down</span> <i class="bi bi-chevron-down "></i></a>
                        <ul>
                            <li><a href="# ">Drop Down 1</a></li>
                            <li class="dropdown "><a href="# "><span>Deep Drop Down</span> <i class="bi bi-chevron-right "></i></a>
                                <ul>
                                    <li><a href="# ">Deep Drop Down 1</a></li>
                                    <li><a href="# ">Deep Drop Down 2</a></li>
                                    <li><a href="# ">Deep Drop Down 3</a></li>
                                    <li><a href="# ">Deep Drop Down 4</a></li>
                                    <li><a href="# ">Deep Drop Down 5</a></li>
                                </ul>
                            </li>
                            <li><a href="# ">Drop Down 2</a></li>
                            <li><a href="# ">Drop Down 3</a></li>
                            <li><a href="# ">Drop Down 4</a></li>
                        </ul>
                    </li>
                    <li><a class="nav-link scrollto " href="#contact ">Contact</a></li>
                     <li><a class="getstarted scrollto " href="#about ">Get Started</a></li>
                 </ul> -->
        <i class="bi bi-list mobile-nav-toggle "></i>
        <!-- </nav> -->
        <!-- .navbar -->

        <!-- </div> -->
    </header>
    <!-- End Header -->

    <!-- ======= Hero Section ======= -->
    <section id="hero " class="hero d-flex align-items-center ">

        <div class="container ">
            <div class="row ">
                <div class="col-lg-6 d-flex flex-column justify-content-center ">
                    <h1 data-aos="fade-up ">Learn more about Intelligent Cities with our City Demonstrator</h1>
                    <h2 data-aos="fade-up " data-aos-delay="400 ">Find out what Intelligent Cities are and how they will shape our future</h2>
                    <div data-aos="fade-up " data-aos-delay="600 ">
                        <div class="text-center text-lg-start">
                            <a href="#about" class="btn-get-started  d-inline-flex align-items-center justify-content-center align-self-center ">
                                <span>Get Started</span>
                                <i class="bi bi-arrow-right "></i>
                            </a>
                        </div>

                    </div>
                </div>
                <div class="col-lg-6 hero-img" data-aos="zoom-out " data-aos-delay="200 ">
                    <img src="assets/img/ict.png " class="img-fluid " alt=" ">
                </div>
            </div>
        </div>

    </section>
    <!-- End Hero -->

    <main id="main ">
        <!-- ======= About Section ======= -->
        <section id="about" class="about">

            <div class="container " data-aos="fade-up ">
                <div class="row gx-0 ">

                    <div class="col-lg-6 d-flex flex-column justify-content-center " data-aos="fade-up " data-aos-delay="200 ">
                        <div class="content ">
                            <h3>Our Vision</h3>
                            <h2>Re-invent our cities of today to become sustainable, resource efficient and enable digital services to intelligent citizens of tomorrow.
                            </h2>
                            <p></p>

                            <p>
                                With connected systems (e.g. IoT devices) and sensors across the city, many aspects of everyday life can be montiored and improved.</p>
                            <p>For example: traffic, mobility concepts, building-infrastructures, air-pollution, currently created electricity via PV systems and many more.
                            </p>
                            <div class="text-center text-lg-start">
                                <a href="#features" class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center ">
                                    <span>Read More</span>
                                    <i class="bi bi-arrow-right "></i>
                                </a>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 d-flex align-items-center " data-aos="zoom-out " data-aos-delay="200 ">
                        <img src="assets/img/intelligentcity_01.svg " class="img-fluid " alt=" ">
                    </div>

                </div>
            </div>

        </section>
        <!-- End About Section -->


        <!-- ======= Features Section ======= -->
        <section id="features" class="features ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Features</h2>
                    <p>Features of an intelligent city</p>
                </header>

                <div class="row ">

                    <div class="col-lg-6 ">
                        <!-- <img src="assets/img/icity.jpg " class="img-fluid " alt=" "> -->
                        <img src="assets/img/icityThemes.png" class="img-fluid " alt=" ">
                    </div>

                    <div class="col-lg-6 mt-5 mt-lg-0 d-flex ">
                        <div class="row align-self-center gy-4 ">

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="200 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Intelligent citizens</h3>
                                </div>
                            </div>

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="300 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Renewable energies</h3>
                                </div>
                            </div>

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="400 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Innovative mobility concepts</h3>
                                </div>
                            </div>

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="500 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Interconnected devices and services</h3>
                                </div>
                            </div>

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="600 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Urban environment</h3>
                                </div>
                            </div>

                            <div class="col-md-6 " data-aos="zoom-out " data-aos-delay="700 ">
                                <div class="feature-box d-flex align-items-center ">
                                    <i class="bi bi-check "></i>
                                    <h3>Sustainable buildings and neighborhoods</h3>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="col-lg-12 " style="justify-content: center; " id=featiretab-arrow>
                        <a href="#featiretab-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
                            <!-- <span>more</span> -->
                            <i class="bi bi-arrow-down " style="font-size: 40px "></i>
                        </a>
                    </div>

                </div>
                <!-- / row -->


                <!-- Feature Tabs ======== LIVABLE ======== -->
                <div class="row feture-tabs " data-aos="fade-up ">
                    <header class="section-header ">
                        <p>The three fundamental aspects of intelligent cities: LIS</p>
                        <p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</p>
                    </header>


                    <div class="col-lg-6 ">
                        <!-- Tabs -->
                        <!-- <ul class="nav nav-pills mb-3 ">
                            <li>
                                <a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
                            </li>
                        </ul> -->
                        <!-- End Tabs -->

                        <!-- Tab Content -->
                        <div class="tab-content ">

                            <div class="tab-pane fade show active " id="livable ">
                                <p>Cities should become a place where citizens can easily meet each other in green spaces using intelligent mobility concepts</p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Intelligent Mobility for Intelligent Citizens</h4>
                                </div>
                                <p>For example, finding the perfect route for E-bikes / E-scouters based on fitness level and heart-rate of the user and the battery charge level of the bike. </p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Green spaces and natural environment</h4>
                                </div>
                                <p>Green spaces may be watered automatically using conditioned rain and or gray water during dry periods. Information about soil dryness and nutritional status is measured using IoT devices.</p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Actor-centric neighborhood development</h4>
                                </div>
                                <p>Neighborhoods and infills are designed according to the needs of future residents in terms of floor-plan types and sizes, auxiliary functions and retail as well as smart services for mobility, utilities, retail and social
                                    organization.
                                </p>

                            </div>
                            <!-- End Tab 1 Content -->
                        </div>

                    </div>

                    <div class="col-lg-6 ">
                        <img src="assets/img/livable.jpg " class="img-fluid " alt=" ">
                        <!-- <img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" "> -->
                    </div>

                    <div class="col-lg-12 " style="justify-content: center; " id=intelligent-arrow>
                        <a href="#intelligent-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
                            <!-- <span>more</span> -->
                            <i class="bi bi-arrow-down " style="font-size: 40px "></i>
                        </a>
                    </div>

                </div>
                <!-- End Feature Tabs  ======== LIVABLE ======== -->


                <!-- Feature Tabs ======== INTELLIGENT ======== -->
                <div id="intelligent-top " class="row feture-tabs " data-aos="fade-up ">
                    <header class="section-header ">

                        <p class="nav-link active " data-bs-toggle="pill ">intelligent</p>
                    </header>

                    <div class="col-lg-6 ">
                        <!-- <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Forschung/_processed_/3/a/csm_iCity_bubbles_HFT_Stadt_ce4e80930c.png " class="img-fluid " alt=" "> -->
                        <img src="assets/img/intelligent.jpg " class="img-fluid " style="height: 400px;" alt=" ">
                    </div>

                    <div class="col-lg-6 ">
                        <!-- <h3>The three fundamental aspects of smart cities: LIS</h3> -->

                        <!-- Tabs -->
                        <!-- <ul class="nav nav-pills mb-3 ">
                            <li>
                                <a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">intelligent</a>
                            </li>
                        </ul> -->
                        <!-- End Tabs -->

                        <!-- Tab Content -->
                        <div class="tab-content ">

                            <div class="tab-pane fade show active " id="intelligent ">
                                <p>Connecting a variaty of sensors and devices will make cities more accessible, easier to navigate in and learn about the surroundings (e.g. current wind or air pollution) </p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Intelligent cities need intelligent people</h4>
                                </div>
                                <p>The human factor has an enormous impact on the development of a city, thus people need to be given the data and should be empowered to contriubte intelligently </p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Intelligent data storage and distribution</h4>
                                </div>
                                <p>While a plethora of data is being collected, it is even more important to disect, seperate and store data in processable junks to ensures data security and privacy of citizens.</p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Intelligent operation of utilities and infrastructure
                                    </h4>
                                </div>
                                <p>Information makes it easier and more efficient for suppliers of electricity, mobility, communication technology, water, etc. to match peaks of production with peaks and lows of demand. Building information modelling allows
                                    operators to repair and maintain physical assets more efficiently.
                                </p>

                            </div>
                            <!-- End Tab 1 Content -->
                        </div>
                    </div>

                    <div class="col-lg-12 " style="justify-content: center; " id=sustainable-arrow>
                        <a href="#sustainable-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
                            <!-- <span>more</span> -->
                            <i class="bi bi-arrow-down " style="font-size: 40px "></i>
                        </a>
                    </div>

                </div>
                <!-- End Feature Tabs  ======== INTELLIGENT ========  -->


                <!-- Feature Tabs ======== SUSTAIABLE ======== -->
                <div id="sustainable-top " class="row feture-tabs " data-aos="fade-up ">
                    <header class="section-header ">

                        <p class="nav-link active " data-bs-toggle="pill " href="#tab1 ">sustainable</p>
                    </header>


                    <div class="col-lg-6 ">
                        <!-- Tabs -->
                        <!-- <ul class="nav nav-pills mb-3 ">
                            <li>
                                <a class="nav-link active " data-bs-toggle="pill " href="#tab1 ">livable</a>
                            </li>
                        </ul> -->
                        <!-- End Tabs -->

                        <!-- Tab Content -->
                        <div class="tab-content ">

                            <div class="tab-pane fade show active " id="sustainable ">
                                <p>Tomorrow's city spends its resources carefully. This means that resources need to be collected, measured, conserved and used at the right time and place.</p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Quality of live is at the heart of intelligent cities and citizens foster it </h4>
                                </div>
                                <p>Modern cities provide more green spaces and natural environments to live and spend quality time with friends and family.</p>
                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Live like there is no tomorrow - reduce your carbon foot print</h4>
                                </div>
                                <p>By visualizing air pollution and CO2 concentration as well as wind flows of the city using 3D web-applications, citizens may be more sensitive to their behavior and are easiert incentivized to use environmentally friendly
                                    modes of transportation.</p>

                                <div class="d-flex align-items-center mb-2 ">
                                    <i class="bi bi-check2 "></i>
                                    <h4>Cradle 2 Cradle</h4>
                                </div>
                                <p>A material cadaster for buildings and infrastructure keeps track of materials like copper and steel that are used in buildings and become raw materials at the end of the buildings service life. </p>

                            </div>
                            <!-- End Tab 1 Content -->
                        </div>

                    </div>

                    <div class="col-lg-6 ">
                        <!-- <img src="assets/img/sustainable.jpg " class="img-fluid " alt=" "> -->
                        <img src="assets/img/200127_Luftstroemung.jpg " class="img-fluid " alt=" ">
                    </div>

                    <div class="col-lg-12 " style="justify-content: center; " id=featureicon-arrow>
                        <a href="#featureicon-arrow " class="btn-read-more d-inline-flex align-items-center justify-content-center align-self-center " style="padding-left: 50%; padding-top: 50px; ">
                            <!-- <span>more</span> -->
                            <i class="bi bi-arrow-down " style="font-size: 50px "></i>
                        </a>
                    </div>

                </div>
                <!-- End Feature Tabs  ======== LIVABLE ======== -->


                <!-- Feature Icons -->
                <!-- <div class="row feature-icons " data-aos="fade-up ">
                    <h3></h3>

                    <div class="row ">

                        <div class="col-xl-4 text-center " data-aos="fade-right " data-aos-delay="100 ">
                            <!-- <img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" "> -->
                <!-- <img src="assets/img/workspace.jpg " class="img-fluid p-4 " alt=" ">
                        </div> 

                        <div class="col-xl-8 d-flex content ">
                            <div class="row align-self-center gy-4 ">

                                <div class="col-md-6 icon-box " data-aos="fade-up ">
                                    <i class="ri-line-chart-line "></i>
                                    <div>
                                        <h4>Corporis voluptates sit</h4>
                                        <p>Consequuntur sunt aut quasi enim aliquam quae harum pariatur laboris nisi ut aliquip</p>
                                    </div>
                                </div>

                                <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="100 ">
                                    <i class="ri-stack-line "></i>
                                    <div>
                                        <h4>Ullamco laboris nisi</h4>
                                        <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt</p>
                                    </div>
                                </div>

                                <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="200 ">
                                    <i class="ri-brush-4-line "></i>
                                    <div>
                                        <h4>Labore consequatur</h4>
                                        <p>Aut suscipit aut cum nemo deleniti aut omnis. Doloribus ut maiores omnis facere</p>
                                    </div>
                                </div>

                                <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="300 ">
                                    <i class="ri-magic-line "></i>
                                    <div>
                                        <h4>Beatae veritatis</h4>
                                        <p>Expedita veritatis consequuntur nihil tempore laudantium vitae denat pacta</p>
                                    </div>
                                </div>

                                <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="400 ">
                                    <i class="ri-command-line "></i>
                                    <div>
                                        <h4>Molestiae dolor</h4>
                                        <p>Et fuga et deserunt et enim. Dolorem architecto ratione tensa raptor marte</p>
                                    </div>
                                </div>

                                <div class="col-md-6 icon-box " data-aos="fade-up " data-aos-delay="500 ">
                                    <i class="ri-radar-line "></i>
                                    <div>
                                        <h4>Explicabo consectetur</h4>
                                        <p>Est autem dicta beatae suscipit. Sint veritatis et sit quasi ab aut inventore</p>
                                    </div>
                                </div>

                            </div>
                        </div>

                    </div>

                </div> -->


                <!-- End Feature Icons -->


            </div>

        </section>
        <!-- End Features Section -->


        <!-- ======= Services Section ======= -->
        <!-- <section id="services " class="services ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Services</h2>
                    <p>Veritatis et dolores facere numquam et praesentium</p>
                </header>

                <div class="row gy-4 ">

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="200 ">
                        <div class="service-box blue ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Nesciunt Mete</h3>
                            <p>Provident nihil minus qui consequatur non omnis maiores. Eos accusantium minus dolores iure perferendis tempore et consequatur.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="300 ">
                        <div class="service-box orange ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Eosle Commodi</h3>
                            <p>Ut autem aut autem non a. Sint sint sit facilis nam iusto sint. Libero corrupti neque eum hic non ut nesciunt dolorem.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="400 ">
                        <div class="service-box green ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Ledo Markt</h3>
                            <p>Ut excepturi voluptatem nisi sed. Quidem fuga consequatur. Minus ea aut. Vel qui id voluptas adipisci eos earum corrupti.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="500 ">
                        <div class="service-box red ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Asperiores Commodi</h3>
                            <p>Non et temporibus minus omnis sed dolor esse consequatur. Cupiditate sed error ea fuga sit provident adipisci neque.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="600 ">
                        <div class="service-box purple ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Velit Doloremque.</h3>
                            <p>Cumque et suscipit saepe. Est maiores autem enim facilis ut aut ipsam corporis aut. Sed animi at autem alias eius labore.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 " data-aos="fade-up " data-aos-delay="700 ">
                        <div class="service-box pink ">
                            <i class="ri-discuss-line icon "></i>
                            <h3>Dolori Architecto</h3>
                            <p>Hic molestias ea quibusdam eos. Fugiat enim doloremque aut neque non et debitis iure. Corrupti recusandae ducimus enim.</p>
                            <a href="# " class="read-more "><span>Read More</span> <i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                </div>

            </div>

        </section> -->
        <!-- End Services Section -->

        <!-- ======= Pricing Section ======= -->
        <!-- <section id="pricing " class="pricing ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Pricing</h2>
                    <p>Check our Pricing</p>
                </header>

                <div class="row gy-4 " data-aos="fade-left ">

                    <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="100 ">
                        <div class="box ">
                            <h3 style="color: #07d5c0; ">Free Plan</h3>
                            <div class="price "><sup>$</sup>0<span> / mo</span></div>
                            <img src="assets/img/pricing-free.png " class="img-fluid " alt=" ">
                            <ul>
                                <li>Aida dere</li>
                                <li>Nec feugiat nisl</li>
                                <li>Nulla at volutpat dola</li>
                                <li class="na ">Pharetra massa</li>
                                <li class="na ">Massa ultricies mi</li>
                            </ul>
                            <a href="# " class="btn-buy ">Buy Now</a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="200 ">
                        <div class="box ">
                            <span class="featured ">Featured</span>
                            <h3 style="color: #65c600; ">Starter Plan</h3>
                            <div class="price "><sup>$</sup>19<span> / mo</span></div>
                            <img src="assets/img/pricing-starter.png " class="img-fluid " alt=" ">
                            <ul>
                                <li>Aida dere</li>
                                <li>Nec feugiat nisl</li>
                                <li>Nulla at volutpat dola</li>
                                <li>Pharetra massa</li>
                                <li class="na ">Massa ultricies mi</li>
                            </ul>
                            <a href="# " class="btn-buy ">Buy Now</a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="300 ">
                        <div class="box ">
                            <h3 style="color: #ff901c; ">Business Plan</h3>
                            <div class="price "><sup>$</sup>29<span> / mo</span></div>
                            <img src="assets/img/pricing-business.png " class="img-fluid " alt=" ">
                            <ul>
                                <li>Aida dere</li>
                                <li>Nec feugiat nisl</li>
                                <li>Nulla at volutpat dola</li>
                                <li>Pharetra massa</li>
                                <li>Massa ultricies mi</li>
                            </ul>
                            <a href="# " class="btn-buy ">Buy Now</a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 " data-aos="zoom-in " data-aos-delay="400 ">
                        <div class="box ">
                            <h3 style="color: #ff0071; ">Ultimate Plan</h3>
                            <div class="price "><sup>$</sup>49<span> / mo</span></div>
                            <img src="assets/img/pricing-ultimate.png " class="img-fluid " alt=" ">
                            <ul>
                                <li>Aida dere</li>
                                <li>Nec feugiat nisl</li>
                                <li>Nulla at volutpat dola</li>
                                <li>Pharetra massa</li>
                                <li>Massa ultricies mi</li>
                            </ul>
                            <a href="# " class="btn-buy ">Buy Now</a>
                        </div>
                    </div>

                </div>

            </div>

        </section> -->
        <!-- End Pricing Section -->


        <!-- ======= Values Section ======= -->
        <section id="values " class="values ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>City Demonstrator</h2>
                    <p>Select one Demonstrator to explore</p>
                </header>

                <div class="row ">

                    <div class="col-lg-4 ">
                        <div class="box " data-aos="fade-up " data-aos-delay="200 ">
                            <!-- <img src="assets/img/values-1.png " class="img-fluid " alt=" ">
                            <h3>DreSo</h3> -->
                            <h3>Drees & Sommer</h3>
                            <a href="https://www.dreso.com/de/ " class="logo d-flex align-items-center ">
                                <img src="assets/img/DreeSoDemonstrator3.png" width="350 " alt=" ">
                                <!-- <span>City Demonstrator</span> -->
                            </a>
                            <p>Explore the City Demonstrator from Drees & Sommer
                            </p>
                        </div>
                    </div>

                    <div class="col-lg-4 mt-4 mt-lg-0 ">
                        <!-- <div class="box " data-aos="fade-up " data-aos-delay="400 ">
                            <img src="assets/img/values-2.png " class="img-fluid " alt=" ">
                            <h3>Voluptatem voluptatum alias</h3>
                            <p>Repudiandae amet nihil natus in distinctio suscipit id. Doloremque ducimus ea sit non.</p>
                        </div> -->
                    </div>

                    <div class="col-lg-4 mt-4 mt-lg-0 ">
                        <div class="box " data-aos="fade-up " data-aos-delay="600 ">
                            <!-- <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " class="img-fluid " alt=" "> -->
                            <h3>HFT Stuttgart</h3>
                            <a href="https://ugl.hft-stuttgart.de/ " class="logo d-flex align-items-center ">
                                <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
                                <!-- <span>City Demonstrator</span> -->
                            </a>
                            <p>Explore the City Demonstrator from HfT Stuttgart</p>
                        </div>
                    </div>

                </div>

            </div>

        </section>
        <!-- End Values Section -->

        <!-- ======= Counts Section ======= -->
        <!-- <section id="counts " class="counts ">
            <div class="container " data-aos="fade-up ">

                <div class="row gy-4 ">

                    <div class="col-lg-3 col-md-6 ">
                        <div class="count-box ">
                            <i class="bi bi-emoji-smile "></i>
                            <div>
                                <span data-purecounter-start="0 " data-purecounter-end="232 " data-purecounter-duration="2 " class="purecounter "></span>
                                <p>Happy Clients</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 ">
                        <div class="count-box ">
                            <i class="bi bi-journal-richtext " style="color: #ee6c20; "></i>
                            <div>
                                <span data-purecounter-start="0 " data-purecounter-end="521 " data-purecounter-duration="2 " class="purecounter "></span>
                                <p>Projects</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 ">
                        <div class="count-box ">
                            <i class="bi bi-headset " style="color: #15be56; "></i>
                            <div>
                                <span data-purecounter-start="0 " data-purecounter-end="1463 " data-purecounter-duration="1 " class="purecounter "></span>
                                <p>Hours Of Support</p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 ">
                        <div class="count-box ">
                            <i class="bi bi-people " style="color: #bb0852; "></i>
                            <div>
                                <span data-purecounter-start="0 " data-purecounter-end="15 " data-purecounter-duration="1 " class="purecounter "></span>
                                <p>Hard Workers</p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </section> -->
        <!-- End Counts Section -->


        <!-- ======= Portfolio Section ======= -->
        <!-- <section id="portfolio " class="portfolio ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Portfolio</h2>
                    <p>Check our latest work</p>
                </header>

                <div class="row " data-aos="fade-up " data-aos-delay="100 ">
                    <div class="col-lg-12 d-flex justify-content-center ">
                        <ul id="portfolio-flters ">
                            <li data-filter="* " class="filter-active ">All</li>
                            <li data-filter=".filter-app ">App</li>
                            <li data-filter=".filter-card ">Card</li>
                            <li data-filter=".filter-web ">Web</li>
                        </ul>
                    </div>
                </div>

                <div class="row gy-4 portfolio-container " data-aos="fade-up " data-aos-delay="200 ">

                    <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-1.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>App 1</h4>
                                <p>App</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-1.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 1 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-2.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Web 3</h4>
                                <p>Web</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-2.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-3.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>App 2</h4>
                                <p>App</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-3.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 2 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-4.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Card 2</h4>
                                <p>Card</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-4.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 2 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-5.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Web 2</h4>
                                <p>Web</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-5.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 2 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-app ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-6.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>App 3</h4>
                                <p>App</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-6.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="App 3 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-7.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Card 1</h4>
                                <p>Card</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-7.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 1 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-card ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-8.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Card 3</h4>
                                <p>Card</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-8.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Card 3 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-4 col-md-6 portfolio-item filter-web ">
                        <div class="portfolio-wrap ">
                            <img src="assets/img/portfolio/portfolio-9.jpg " class="img-fluid " alt=" ">
                            <div class="portfolio-info ">
                                <h4>Web 3</h4>
                                <p>Web</p>
                                <div class="portfolio-links ">
                                    <a href="assets/img/portfolio/portfolio-9.jpg " data-gallery="portfolioGallery " class="portfokio-lightbox " title="Web 3 "><i class="bi bi-plus "></i></a>
                                    <a href="portfolio-details.html " title="More Details "><i class="bi bi-link "></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </section> -->
        <!-- End Portfolio Section -->

        <!-- ======= Testimonials Section ======= -->
        <!-- <section id="testimonials " class="testimonials ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Testimonials</h2>
                    <p>What they are saying about us</p>
                </header>

                <div class="testimonials-slider swiper-container " data-aos="fade-up " data-aos-delay="200 ">
                    <div class="swiper-wrapper ">

                        <div class="swiper-slide ">
                            <div class="testimonial-item ">
                                <div class="stars ">
                                    <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
                                </div>
                                <p>
                                    Proin iaculis purus consequat sem cure digni ssim donec porttitora entum suscipit rhoncus. Accusantium quam, ultricies eget id, aliquam eget nibh et. Maecen aliquam, risus at semper.
                                </p>
                                <div class="profile mt-auto ">
                                    <img src="assets/img/testimonials/testimonials-1.jpg " class="testimonial-img " alt=" ">
                                    <h3>Saul Goodman</h3>
                                    <h4>Ceo &amp; Founder</h4>
                                </div>
                            </div>
                        </div>
                        <!-- End testimonial item -->

        <!--                        <div class="swiper-slide ">
                            <div class="testimonial-item ">
                                <div class="stars ">
                                    <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
                                </div>
                                <p>
                                    Export tempor illum tamen malis malis eram quae irure esse labore quem cillum quid cillum eram malis quorum velit fore eram velit sunt aliqua noster fugiat irure amet legam anim culpa.
                                </p>
                                <div class="profile mt-auto ">
                                    <img src="assets/img/testimonials/testimonials-2.jpg " class="testimonial-img " alt=" ">
                                    <h3>Sara Wilsson</h3>
                                    <h4>Designer</h4>
                                </div>
                            </div>
                        </div>
                        <!-- End testimonial item -->

        <!--                        <div class="swiper-slide ">
                            <div class="testimonial-item ">
                                <div class="stars ">
                                    <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
                                </div>
                                <p>
                                    Enim nisi quem export duis labore cillum quae magna enim sint quorum nulla quem veniam duis minim tempor labore quem eram duis noster aute amet eram fore quis sint minim.
                                </p>
                                <div class="profile mt-auto ">
                                    <img src="assets/img/testimonials/testimonials-3.jpg " class="testimonial-img " alt=" ">
                                    <h3>Jena Karlis</h3>
                                    <h4>Store Owner</h4>
                                </div>
                            </div>
                        </div>
                        <!-- End testimonial item -->
        <!-- 
                        <div class="swiper-slide ">
                            <div class="testimonial-item ">
                                <div class="stars ">
                                    <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
                                </div>
                                <p>
                                    Fugiat enim eram quae cillum dolore dolor amet nulla culpa multos export minim fugiat minim velit minim dolor enim duis veniam ipsum anim magna sunt elit fore quem dolore labore illum veniam.
                                </p>
                                <div class="profile mt-auto ">
                                    <img src="assets/img/testimonials/testimonials-4.jpg " class="testimonial-img " alt=" ">
                                    <h3>Matt Brandon</h3>
                                    <h4>Freelancer</h4>
                                </div>
                            </div>
                        </div>
                        <!-- End testimonial item -->

        <!--  <div class="swiper-slide ">
                            <div class="testimonial-item ">
                                <div class="stars ">
                                    <i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i><i class="bi bi-star-fill "></i>
                                </div>
                                <p>
                                    Quis quorum aliqua sint quem legam fore sunt eram irure aliqua veniam tempor noster veniam enim culpa labore duis sunt culpa nulla illum cillum fugiat legam esse veniam culpa fore nisi cillum quid.
                                </p>
                                <div class="profile mt-auto ">
                                    <img src="assets/img/testimonials/testimonials-5.jpg " class="testimonial-img " alt=" ">
                                    <h3>John Larson</h3>
                                    <h4>Entrepreneur</h4>
                                </div>
                            </div>
                        </div>
                        <!-- End testimonial item -->

        <!--                    </div>
                    <div class="swiper-pagination "></div>
                </div>

            </div>

        </section> -->
        <!-- End Testimonials Section -->

        <!-- ======= Team Section ======= -->
        <section id="team " class="team ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Team</h2>
                    <p>Talk to us at the conference</p>
                </header>

                <div class="row gy-4 ">

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="100 ">
                        <div class="member ">
                            <div class="member-img ">
                                <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/f/2/csm_Coors-Volker__2__2fbc5a88e2.jpg " class="img-fluid " alt=" ">
                                <div class="social ">
                                    <a href=" "><i class="bi bi-twitter "></i></a>
                                    <a href=" "><i class="bi bi-facebook "></i></a>
                                    <!-- <a href=" "><i class="bi bi-instagram "></i></a> -->
                                    <a href=" "><i class="bi bi-linkedin "></i></a>
                                </div>
                            </div>
                            <div class="member-info ">
                                <h4>Prof. Volker Coors</h4>
                                <span>IAF Director</span>
                                <p>Some text about Volker <br><a href="mailto:volker.coors@hft-stuttgart.de">volker.coors@hft-stuttgart.de</a> </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="200 ">
                        <div class="member ">
                            <div class="member-img ">
                                <img src="assets/img/Iris3.jpg" class="img-fluid " alt=" ">
                                <div class="social ">
                                    <a href=" "><i class="bi bi-twitter "></i></a>
                                    <a href=" "><i class="bi bi-facebook "></i></a>
                                    <!-- <a href=" "><i class="bi bi-instagram "></i></a> -->
                                    <a href=" "><i class="bi bi-linkedin "></i></a>
                                </div>
                            </div>
                            <div class="member-info ">
                                <h4>Prof. Iris Belle</h4>
                                <span>Prof. in Master's degree <i>Smart City Solutions</i>. Consultant at DreSo</span>
                                <p>Iris Belle co-directs the Master Programme Smart City Solutions at HfT Stuttgart. She is also a Leading Consultant at Drees & Sommer and develops digital and sustainability concepts for cities, precincts and campuses for
                                    public and private clients. She co-leads the Smart City Demonstrator. Iris Belle holds a PhD in Geography from Heidelberg University and a Diploma in Architecture from Karlsruhe Institute of Technology. <br> <a href="mailto:iris.belle@hft-stuttgart.de">iris.belle@hft-stuttgart.de</a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="300 ">
                        <div class="member ">
                            <div class="member-img ">
                                <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/d/4/csm_Haag-Max__1__fc1ce3bf4c.jpg" class="img-fluid " alt=" ">
                                <div class="social ">
                                    <a href=" "><i class="bi bi-twitter "></i></a>
                                    <a href=" "><i class="bi bi-facebook "></i></a>
                                    <!-- <a href=" "><i class="bi bi-instagram "></i></a> -->
                                    <a href=" "><i class="bi bi-linkedin "></i></a>
                                </div>
                            </div>
                            <div class="member-info ">
                                <h4>Maximilian Haag</h4>
                                <span>Managing Director zafh.net / Program Management iCity</span>
                                <p>Maximilian Haag is managing the Center for Sustainable Energy Technology (zafh.net) at HFT Stuttgart. He is also responsible for the strategic development of the research program iCity: Intelligent City" at HFT Stuttgart.
                                    He develops transdisciplinary projects in the fields of Smart Buildings & Smart Cities, Building and Energy Technologies. <br>
                                    <a href="mailto:maximilian.haag@hft-stuttgart.de">maximilian.haag@hft-stuttgart.de</a>
                                </p>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 d-flex align-items-stretch " data-aos="fade-up " data-aos-delay="400 ">
                        <div class="member ">
                            <div class="member-img ">
                                <img src="https://www.hft-stuttgart.de/fileadmin/Dateien/Profilbilder/_processed_/7/f/csm_ImageProfil_e7a92cdd9b.jpg" class="img-fluid " alt=" ">
                                <div class="social ">
                                    <a href=" "><i class="bi bi-twitter "></i></a>
                                    <a href=" "><i class="bi bi-facebook "></i></a>
                                    <!-- <a href=" "><i class="bi bi-instagram "></i></a> -->
                                    <a href=" "><i class="bi bi-linkedin "></i></a>
                                </div>
                            </div>
                            <div class="member-info ">
                                <h4>Patrick Wuerstle</h4>
                                <span>Researcher at IAF and ZGG</span>
                                <p>M4_LAB Innovative Hochschule Smart Villages <br><a href="mailto:patrick.wuerstle@hft-stuttgart.de">patrick.wuerstle@hft-stuttgart.de</a> </p>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </section>
        <!-- End Team Section -->


        <!-- ======= Clients Section ======= -->
        <!-- <section id="clients " class="clients ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Our Partners</h2>
                    <p>An overview of our research partners at HfT Suttgart</p>
                </header>

                <div class="clients-slider swiper-container ">
                    <div class="swiper-wrapper align-items-center ">
                        <div class="swiper-slide "><img src="assets/img/clients/client-1.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/client-2.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/client-3.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/client-4.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/client-5.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/client-6.png " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/partner1.svg " class="img-fluid " alt=" "></div>
                        <div class="swiper-slide "><img src="assets/img/clients/partner2.svg " class="img-fluid " alt=" "></div>
                    </div>
                    <div class="swiper-pagination "></div>
                </div>
            </div>

        </section> -->
        <!-- End Clients Section -->

        <!-- ======= Recent Blog Posts Section ======= -->
        <!-- <section id="recent-blog-posts " class="recent-blog-posts ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Blog</h2>
                    <p>Recent posts form our Blog</p>
                </header>

                <div class="row ">

                    <div class="col-lg-4 ">
                        <div class="post-box ">
                            <div class="post-img "><img src="assets/img/blog/blog-1.jpg " class="img-fluid " alt=" "></div>
                            <span class="post-date ">Tue, September 15</span>
                            <h3 class="post-title ">Eum ad dolor et. Autem aut fugiat debitis voluptatem consequuntur sit</h3>
                            <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 ">
                        <div class="post-box ">
                            <div class="post-img "><img src="assets/img/blog/blog-2.jpg " class="img-fluid " alt=" "></div>
                            <span class="post-date ">Fri, August 28</span>
                            <h3 class="post-title ">Et repellendus molestiae qui est sed omnis voluptates magnam</h3>
                            <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                    <div class="col-lg-4 ">
                        <div class="post-box ">
                            <div class="post-img "><img src="assets/img/blog/blog-3.jpg " class="img-fluid " alt=" "></div>
                            <span class="post-date ">Mon, July 11</span>
                            <h3 class="post-title ">Quia assumenda est et veritatis aut quae</h3>
                            <a href="blog-singe.html " class="readmore stretched-link mt-auto "><span>Read More</span><i class="bi bi-arrow-right "></i></a>
                        </div>
                    </div>

                </div>

            </div>

        </section> -->
        <!-- End Recent Blog Posts Section -->

        <!-- ======= Contact Section ======= -->
        <section id="contact " class="contact ">

            <div class="container " data-aos="fade-up ">

                <header class="section-header ">
                    <h2>Contact</h2>
                    <p>Contact Us</p>
                </header>

                <div class="row gy-4 ">

                    <div class="col-lg-8 ">

                        <div class="row gy-4 ">
                            <div class="col-md-6 ">
                                <div class="info-box ">
                                    <i class="bi bi-geo-alt "></i>
                                    <h3>Address</h3>
                                    <p>Schellingstr. 24 <br> D-70174 Stuttgart</p>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="info-box ">
                                    <i class="bi bi-telephone "></i>
                                    <h3>Call Us</h3>
                                    <p> Secretariat <br> +49 (0)711 8926 0 <br> </p>
                                    <p></p>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="info-box ">
                                    <i class="bi bi-envelope "></i>
                                    <h3>Email Us</h3>
                                    <p>Secretariat <br> icity@hft-stuttgart.de
                                        <br></p>
                                </div>
                            </div>
                            <div class="col-md-6 ">
                                <div class="info-box ">
                                    <i class="bi bi-clock "></i>
                                    <h3>Open Hours</h3>
                                    <p>Monday - Friday<br>9:00AM - 05:00PM</p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <!-- <div class="col-lg-6 ">
                        <form action="forms/contact.php " method="post " class="php-email-form ">
                            <div class="row gy-4 ">

                                <div class="col-md-6 ">
                                    <input type="text " name="name " class="form-control " placeholder="Your Name " required>
                                </div>

                                <div class="col-md-6 ">
                                    <input type="email " class="form-control " name="email " placeholder="Your Email " required>
                                </div>

                                <div class="col-md-12 ">
                                    <input type="text " class="form-control " name="subject " placeholder="Subject " required>
                                </div>

                                <div class="col-md-12 ">
                                    <textarea class="form-control " name="message " rows="6 " placeholder="Message " required></textarea>
                                </div>

                                <div class="col-md-12 text-center ">
                                    <div class="loading ">Loading</div>
                                    <div class="error-message "></div>
                                    <div class="sent-message ">Your message has been sent. Thank you!</div>

                                    <button type="submit ">Send Message</button>
                                </div>

                            </div>
                        </form>

                    </div> -->

                    <div class="col-xl-4 text-center ">
                        <img src="assets/img/features-3.png " class="img-fluid p-4 " alt=" ">

                    </div>

                </div>

            </div>

        </section>
        <!-- End Contact Section -->

    </main>
    <!-- End #main -->

    <!-- ======= Footer ======= -->
    <footer id="footer " class="footer ">

        <!-- <div class="footer-newsletter ">
            <div class="container ">
                <div class="row justify-content-center ">
                    <div class="col-lg-12 text-center ">
                        <h4>Our Newsletter</h4>
                        <p>Tamen quem nulla quae legam multos aute sint culpa legam noster magna</p>
                    </div>
                    <div class="col-lg-6 ">
                        <form action=" " method="post ">
                            <input type="email " name="email "><input type="submit " value="Subscribe ">
                        </form>
                    </div>
                </div>
            </div>
        </div> -->

        <div class="footer-top ">
            <div class="container ">
                <div class="row gy-4 ">
                    <div class="col-lg-5 col-md-12 footer-info ">
                        <a href="https://www.hft-stuttgart.de " class="logo d-flex align-items-center ">
                            <img src="https://www.hft-stuttgart.de/typo3conf/ext/hft_sitepackage/Resources/Public/img/HFT_logo.svg " alt=" ">
                            <span>City Demonstrator</span>
                        </a>
                        <!-- <p>Visit us on our social media accounts</p> -->
                        <div class="social-links mt-3 ">
                            <!--    <a href="# " class="twitter "><i class="bi bi-twitter "></i></a>
                            <a href="# " class="facebook "><i class="bi bi-facebook "></i></a>
                            <a href="# " class="instagram "><i class="bi bi-instagram bx bxl-instagram "></i></a>
                            <a href="# " class="linkedin "><i class="bi bi-linkedin bx bxl-linkedin "></i></a> -->

                            <p style="margin-top: 20px; margin-bottom: 20px;"> </p>

                            <a href="https://www.dreso.com " class=" align-items-center ">
                                <img src="https://www.dreso.com/typo3conf/ext/dreso/Resources/Public/dreso-logo.svg " style="width: 120px;" alt=" "></a>

                            <a href="http://icity.hft-stuttgart.de/#/ " class="
                             align-items-center ">
                                <img src="assets/img/icityLogo.jpg " style="width: 120px;  " alt=" "></a>

                        </div>


                    </div>


                    <div class="col-lg-2 col-6 footer-links ">
                        <!-- <h4>Useful Links</h4>
                        <ul>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Home</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">About us</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Services</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Terms of service</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Privacy policy</a></li>
                        </ul> -->
                    </div>

                    <div class="col-lg-2 col-6 footer-links ">
                        <!-- <h4>Our Services</h4>
                        <ul>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Web Design</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Web Development</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Product Management</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Marketing</a></li>
                            <li><i class="bi bi-chevron-right "></i> <a href="# ">Graphic Design</a></li>
                        </ul> -->
                    </div>

                    <div class="col-lg-3 col-md-12 footer-contact text-center text-md-start ">
                        <h4>Contact Us</h4>
                        <p>
                            Hochschule fuer Technik Stuttgart <br> Schellingstr. 24<br> 70174 Stuttgart <br><br>
                            <strong>Phone:</strong> +49 (0)711 8926 0 <br>
                            <strong>Email:</strong> icity@hft-stuttgart.de<br>
                        </p>

                    </div>

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

        <div class="container ">
            <div class="copyright ">
                &copy; Copyright <strong><span>HfT Stuttgart</span></strong>. All Rights Reserved
            </div>
            <div class="credits ">
                <!-- All the links in the footer should remain intact. -->
                <!-- You can delete the links only if you purchased the pro version. -->
                <!-- Licensing information: https://bootstrapmade.com/license/ -->
                <!-- Purchase the pro version with working PHP/AJAX contact form: https://bootstrapmade.com/flexstart-bootstrap-startup-template/ -->
                Designed by <a href="https://bootstrapmade.com/ ">BootstrapMade</a>
            </div>
        </div>
    </footer>
    <!-- End Footer -->

    <a href="# " class="back-to-top d-flex align-items-center justify-content-center "><i class="bi bi-arrow-up-short "></i></a>

    <!-- Vendor JS Files -->
    <script src="assets/vendor/bootstrap/js/bootstrap.bundle.js "></script>
    <script src="assets/vendor/aos/aos.js "></script>
    <script src="assets/vendor/php-email-form/validate.js "></script>
    <script src="assets/vendor/swiper/swiper-bundle.min.js "></script>
    <script src="assets/vendor/purecounter/purecounter.js "></script>
    <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js "></script>
    <script src="assets/vendor/glightbox/js/glightbox.min.js "></script>

    <!-- Template Main JS File -->
    <script src="assets/js/main.js "></script>

</body>

</html>