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

<head>
  <!-- ========== Meta Tags ========== -->
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Healdi - Medical & Health Template" />

  <!-- ========== Page Title ========== -->
  <title>Tycon - About Us</title>

  <!-- ========== Favicon Icon ========== -->
  <link rel="shortcut icon" href="assets/img/favicon.png" type="image/x-icon" />

  <!-- ========== Start Stylesheet ========== -->
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
  <link rel="stylesheet" href="assets/css/animate.css" />
  <link rel="stylesheet" href="assets/css/magnific-popup.css" />
  <link rel="stylesheet" href="assets/css/owl.carousel.min.css" />
  <link rel="stylesheet" href="assets/css/owl.theme.default.min.css" />
  <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
  <link rel="stylesheet" href="assets/css/themify-icons.css" />
  <link rel="stylesheet" href="assets/css/bootsnav.css" />
  <link rel="stylesheet" href="assets/css/flaticon-set.css" />
  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="assets/css/responsive.css" />
  <!-- ========== End Stylesheet ========== -->
</head>

<body>
  <!-- Preloader Start -->
      <div class="preloader">
      <img
        class="preloader__image"
        width="200"
        src="assets/img/logo.png"
        alt=""
      />
    </div>
  <!-- Preloader Ends -->

<?php
include ("includes/header.php");
?>


  <!-- Start Breadcrumb 
    ============================================= -->
  <div class="breadcrumb-area bg-gradient text-center">
    <!-- Fixed BG -->
    <div class="fixed-bg" style="background-image: url(assets/img/shape/9.png)"></div>
    <!-- Fixed BG -->
    <div class="container">
      <div class="row">
        <div class="col-lg-8 offset-lg-2">
          <h1>About Us</h1>
          <ul class="breadcrumb">
            <li>
              <a href="#"><i class="fas fa-home"></i> Home</a>
            </li>
            <li class="active">About</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- End Breadcrumb -->

  <!-- Start Services 
    ============================================= -->
  <div class="container default-padding tycon-tabs">
    <ul class="nav nav-tabs flex-nowrap" id="aboutTabs" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="history-tab" data-bs-toggle="tab" data-bs-target="#history" type="button"
          role="tab">
          History
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="vision-tab" data-bs-toggle="tab" data-bs-target="#vision" type="button" role="tab">
          Vision &amp; Mission
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="services-tab" data-bs-toggle="tab" data-bs-target="#services" type="button"
          role="tab">
          Services
        </button>
      </li>
    </ul>

    <div class="tab-content" id="aboutTabsContent">
      <div class="tab-pane fade show active" id="history" role="tabpanel">
        <div class="row align-items-start g-4">
          <div class="col-lg-12">
            <p class="section-label">Our Story</p>
            <h2 class="section-title">How Tycon began</h2>
            <span class="accent-bar"></span>
            <p class="section-body">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit.
              Dolorum aut deserunt sit. Nemo, illum esse, saepe nobis quisquam
              doloribus modi recusandae vel eos excepturi minus quos eaque
              quasi, cumque quibusdam?
            </p>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="vision" role="tabpanel">
        <div class="row g-4">
          <div class="col-12">
            <p class="section-label">Purpose</p>
            <h2 class="section-title">Vision &amp; Mission</h2>
            <span class="accent-bar"></span>
          </div>
          <div class="col-12 col-sm-6">
            <div class="vm-card">
              <div class="vm-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4747d4" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <circle cx="12" cy="12" r="10" />
                  <circle cx="12" cy="12" r="3" />
                </svg>
              </div>
              <p class="vm-title">Our Vision</p>
              <p class="vm-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Quisquam ratione explicabo at deleniti aut, nam id,
                consequuntur repudiandae eaque debitis laboriosam voluptates
                assumenda minima ipsa voluptate ipsam reprehenderit recusandae
                autem!
              </p>
            </div>
          </div>
          <div class="col-12 col-sm-6">
            <div class="vm-card">
              <div class="vm-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4747d4" stroke-width="2"
                  stroke-linecap="round" stroke-linejoin="round">
                  <path d="M12 2L2 7l10 5 10-5-10-5z" />
                  <path d="M2 17l10 5 10-5" />
                  <path d="M2 12l10 5 10-5" />
                </svg>
              </div>
              <p class="vm-title">Our Mission</p>
              <p class="vm-text">
                Lorem ipsum dolor sit amet consectetur adipisicing elit.
                Saepe, nemo quia dolorum fugit labore at delectus consectetur
                molestiae mollitia minima vitae non, iste ab aspernatur magni
                expedita repellendus, in cumque?
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="tab-pane fade" id="services" role="tabpanel">
        <div class="row g-4">
          <div class="col-12">
            <p class="section-label">What we offer</p>
            <h2 class="section-title">Our Services</h2>
            <span class="accent-bar"></span>
            <p class="section-body">
              Lorem ipsum dolor sit amet consectetur adipisicing elit.
              Accusantium reprehenderit dolorum sint fuga culpa obcaecati
              perspiciatis placeat ratione aliquam hic dicta iusto, quis
              nobis, quibusdam esse pariatur impedit debitis veniam?
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Services -->

  <!-- Start Contact Area  
    ============================================= -->
  <div id="contact" class="contact-us-area default-padding">
    <div class="container">
      <div class="contact-items">
        <div class="row">
          <div class="col-lg-7 wow address-box fadeInUp bg-cover"
            style="background-image: url(assets/img/contact/1.jpg)">
            <div class="address-info">
              <ul>
                <li>
                  <h5><i class="flaticon-call"></i> Phone</h5>
                  <span>+44-20-7328-4499</span>
                </li>
                <li>
                  <h5><i class="flaticon-email"></i> Email</h5>
                  <span>info@healdi.com</span>
                </li>
              </ul>
            </div>
          </div>

          <div class="col-lg-5 wow fadeInLeft contact-form-box">
            <h2>Need help? <strong>Let's ask your questions</strong></h2>
            <form action="assets/mail/contact.php" method="POST" class="contact-form">
              <div class="row">
                <div class="col-lg-12">
                  <div class="form-group">
                    <input class="form-control" id="name" name="name" placeholder="Name" type="text" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input class="form-control" id="email" name="email" placeholder="Email*" type="email" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-6">
                  <div class="form-group">
                    <input class="form-control" id="phone" name="phone" placeholder="Phone" type="text" />
                    <span class="alert-error"></span>
                  </div>
                </div>
                <div class="col-lg-12">
                  <div class="form-group comments">
                    <textarea class="form-control" id="comments" name="comments"
                      placeholder="Tell Us About Project *"></textarea>
                  </div>
                </div>
                <div class="col-lg-12">
                  <button type="submit" name="submit" id="submit">
                    Send Message
                  </button>
                </div>
                <!-- Alert Message -->
                <div class="col-lg-12 alert-notification">
                  <div id="message" class="alert-msg"></div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- End Contact -->
  <div class="maps-area">
    <div class="google-maps">
      <iframe src="https://www.google.com/maps?q=6.9271,79.8612&z=15&output=embed" width="100%" height="450"
        style="border: 0" allowfullscreen="" loading="lazy">
      </iframe>
    </div>
  </div>

  <!-- Start Footer 
    ============================================= -->
  <footer class="bg-dark text-light">
    <div class="container">
      <div class="f-items default-padding">
        <div class="row">
          <div class="col-lg-4 col-md-6 item">
            <div class="f-item about">
              <img src="assets/img/logo-light.png" alt="Logo" />
              <p>
                Required honoured trifling eat pleasure man relation.
                Assurance yet bed was improving furniture man.
              </p>
              <div class="address">
                <ul>
                  <li>
                    <div class="icon">
                      <i class="flaticon-email"></i>
                    </div>
                    <div class="info">
                      <h5>Email:</h5>
                      <span>support@validtemplates.com</span>
                    </div>
                  </li>
                  <li>
                    <div class="icon">
                      <i class="flaticon-call"></i>
                    </div>
                    <div class="info">
                      <h5>Phone:</h5>
                      <span>+44-20-7328-4499</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="single-item col-lg-2 col-md-6 item">
            <div class="f-item link">
              <h4 class="widget-title">Department</h4>
              <ul>
                <li>
                  <a href="#">Medecine & Health</a>
                </li>
                <li>
                  <a href="#">Dental Care</a>
                </li>
                <li>
                  <a href="#">Eye Treatment</a>
                </li>
                <li>
                  <a href="#">Children Chare</a>
                </li>
                <li>
                  <a href="#">Traumatology</a>
                </li>
                <li>
                  <a href="#">X-ray</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="single-item col-lg-2 col-md-6 item">
            <div class="f-item link">
              <h4 class="widget-title">Usefull Links</h4>
              <ul>
                <li>
                  <a href="#">Ambulance</a>
                </li>
                <li>
                  <a href="#">Emergency</a>
                </li>
                <li>
                  <a href="#">Blog</a>
                </li>
                <li>
                  <a href="#">Project</a>
                </li>
                <li>
                  <a href="#">About Us</a>
                </li>
                <li>
                  <a href="#">Contact</a>
                </li>
              </ul>
            </div>
          </div>

          <div class="single-item col-lg-4 col-md-6 item">
            <div class="f-item branches">
              <div class="branches">
                <ul>
                  <li>
                    <strong>USA Branches:</strong>
                    <span>4992 Bryan Avenue, Prior Lake, Minnesota <br />
                      Phone: 651-379-4698</span>
                  </li>
                  <li>
                    <strong>Central Branches:</strong>
                    <span>2001 Kia Magentis, Prior Lake, Minnesota <br />
                      Phone: 651-379-4698</span>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Start Footer Bottom -->
    <div class="footer-bottom">
      <div class="container">
        <div class="row align-center">
          <div class="col-lg-6">
            <p>
              Copyright &copy; 2025. Designed by
              <a href="#">validtemplatess</a>
            </p>
          </div>
          <div class="col-lg-6 text-end social">
            <ul>
              <li>
                <a href="#"><i class="fab fa-facebook-f"></i> Facebook</a>
              </li>
              <li>
                <a href="#"><i class="fab fa-twitter"></i> Twitter</a>
              </li>
              <li>
                <a href="#"><i class="fab fa-youtube"></i> Youtube</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- End Footer Bottom -->
    <a href="#" class="back2top" title="Back to Top">Back to Top</a>
  </footer>
  <!-- End Footer -->

  <!-- jQuery Frameworks
    ============================================= -->
  <script src="assets/js/jquery-3.7.1.min.js"></script>
  <script src="assets/js/bootstrap.min.js"></script>
  <script src="assets/js/bootsnav.js"></script>
  <script src="assets/js/circle-progress.js"></script>
  <script src="assets/js/count-to.js"></script>
  <script src="assets/js/imagesloaded.pkgd.min.js"></script>
  <script src="assets/js/isotope.pkgd.min.js"></script>
  <script src="assets/js/jquery.appear.js"></script>
  <script src="assets/js/jquery.backgroundMove.js"></script>
  <script src="assets/js/jquery.easing.min.js"></script>
  <script src="assets/js/jquery.magnific-popup.min.js"></script>
  <script src="assets/js/jquery.nice-select.min.js"></script>
  <script src="assets/js/loopcounter.js"></script>
  <script src="assets/js/owl.carousel.min.js"></script>
  <script src="assets/js/popper.min.js"></script>
  <script src="assets/js/progress-bar.min.js"></script>
  <script src="assets/js/progresscircle.js"></script>
  <script src="assets/js/wow.min.js"></script>
  <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/fancybox.js"></script>
  <script src="assets/js/main.js"></script>

</body>

</html>