<!doctype html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Mediax - Health & Medical HTML Template - Home One</title>
<meta name="author" content="Mediax">
<meta name="description" content="Mediax - Health & Medical HTML Template">
<meta name="keywords" content="Mediax - Health & Medical HTML Template">
<meta name="robots" content="INDEX,FOLLOW">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicons - Place favicon.ico in the root directory -->
<link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/img/favicons/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/img/favicons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--==============================
Google Fonts
============================== -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100;9..40,200;9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
<!--==============================
All CSS File
============================== -->
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- Fontawesome Icon -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Magnific Popup -->
<link rel="stylesheet" href="assets/css/magnific-popup.min.css">
<!-- Swiper Js -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- datetimepicker -->
<link rel="stylesheet" href="assets/css/jquery.datetimepicker.min.css">
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<!--********************************
Code Start From Here
******************************** -->
<!--==============================
Preloader
==============================-->
<div class="preloader ">
<button class="th-btn preloaderCls">Cancel Preloader </button>
<div class="preloader-inner">
<div class="loader"></div>
</div>
</div>
<div class="space ">
<div class="h1 text-center mt-4">Colors</div>
<div class="container mb-5">
<div class="row">
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--theme-color);">Theme Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--theme-color);">Theme Color 2</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--title-color);">Title Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--body-color);">Body Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--gray-color);">Gray Color</div>
</div>
<div class="col-xl-2">
<div class="p-4 text-white text-center" style="background-color: var(--smoke-color);">Smoke Color</div>
</div>
</div>
</div>
<div class="h1 text-center mt-4">Container</div>
<div class="container mb-5">
<div class="bg-dark py-2">
<div class="h1 text-center text-white">row</div>
<div class="row">
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
<div class="col-4 ">
<div class="py-5 bg-secondary text-white text-center">column</div>
</div>
</div>
</div>
</div>
<div class="container">
<h1>Lorem ipsum dolor sit amet</h1>
<h2>Lorem ipsum dolor sit amet</h2>
<h3>Lorem ipsum dolor sit amet</h3>
<h4>Lorem ipsum dolor sit amet</h4>
<h5>Lorem ipsum dolor sit amet</h5>
<h6>Lorem ipsum dolor sit amet</h6>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus labore, expedita numquam similique odio tempora quo aperiam ipsa quibusdam laboriosam mollitia suscipit! Ullam ipsa maiores magnam soluta adipisci praesentium esse similique quae molestias? Nostrum pariatur voluptatibus veritatis soluta nesciunt quo praesentium. Dolorem vitae deleniti doloremque facere, eaque harum aspernatur dolore hic minus veniam sit expedita sapiente maiores accusantium quo repellendus obcaecati exercitationem labore fugiat! Qui eveniet earum esse delectus quis aspernatur? Vel, voluptatem dolorem possimus ea qui facere. Sapiente cumque id animi veritatis similique quidem consequatur, incidunt natus quis. Recusandae dolorem minus, obcaecati esse ipsam architecto et eius voluptatem ducimus.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minus labore, expedita numquam similique odio tempora quo aperiam ipsa quibusdam laboriosam mollitia suscipit! Ullam ipsa maiores magnam soluta adipisci praesentium esse similique quae molestias? Nostrum pariatur voluptatibus veritatis soluta nesciunt quo praesentium. Dolorem vitae deleniti doloremque facere, eaque harum aspernatur dolore hic minus veniam sit expedita sapiente maiores accusantium quo repellendus obcaecati exercitationem labore fugiat! Qui eveniet earum esse delectus quis aspernatur? Vel, voluptatem dolorem possimus ea qui facere. Sapiente cumque id animi veritatis similique quidem consequatur, incidunt natus quis. Recusandae dolorem minus, obcaecati esse ipsam architecto et eius voluptatem ducimus.</p>
<h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, aspernatur, eius fugit modi veniam inventore sequi necessitatibus laborum deserunt debitis porro veritatis fugiat ipsa commodi est atque ab quasi! Tempora, eaque facilis id molestias libero hic dolore quos, vitae blanditiis veritatis iure rem. Voluptate nostrum quasi nam error nobis est.</h2>
<h4>table style</h4>
<table>
<thead>
<tr>
<th><a href="#">This is a link</a></th>
<th>Table Title</th>
<th>Table Title</th>
<th>Table Title</th>
</tr>
</thead>
<tbody>
<tr>
<th>Table title</th>
<td><a href="#">This is a link</a></td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table title</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
<tr>
<th>Table title</th>
<td>Table Data</td>
<td>Table Data</td>
<td>Table Data</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>table footer data</td>
<td>table footer data</td>
<td>table footer data</td>
<td>table footer data</td>
</tr>
</tfoot>
</table>
<h4>blockquote style</h4>
<blockquote>
<p>Stay hungry. Stay foolish.</p>
</blockquote>
<h4>Nested links</h4>
<h3><a href="#">This is a link in title</a></h3>
<h1><a href="#" class="text-inherit">Inherit link in title</a></h1>
<h2><a href="#" class="text-reset">reset link in title</a></h2>
<p><a href="#">link in paragraph</a></p>
<h4>List styles</h4>
<ul>
<li>List item one
<ul>
<li>List item one
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three
<ol>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
<ol>
<li>List item one
<ol reversed="reversed">
<li>List item one -reversed attribute</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ol>
<ol>
<li>List item one
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
<li>List item four</li>
</ul>
</li>
<li>List item two</li>
</ol>
<h4>Input Styles</h4>
<div class="row">
<div class="form-group col-lg-6 has-label">
<label for="text">Company name (optional)*</label>
<input type="text" id="text" placeholder="Enter Your Name">
</div>
<div class="form-group col-lg-6 has-label">
<label for="text2">Company name (optional)*</label>
<input type="text" id="text2" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-lg-6">
<input type="text" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-lg-6">
<input type="text" placeholder="Enter Your Name">
<i class="fal fa-user"></i>
</div>
<div class="form-group col-12">
<select name="name" id="name">
<option value="" selected disabled hidden>Select Subject</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
</select>
</div>
<div class="form-group col-12">
<textarea name="textARea" id="textARea" cols="30" rows="10" placeholder="Write you message"></textarea>
<i class="far fa-pencil"></i>
</div>
<div class="form-group col-12">
<input type="checkbox" id="checkbox" name="checkbox">
<label for="checkbox">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Id, similique?</label>
</div>
<div class="form-group col-12">
<div>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label>
</div>
<div>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
</div>
<div>
<input type="radio" id="javascript" name="fav_language" value="JavaScript"><label for="javascript">JavaScript</label>
</div>
</div>
</div>
<h4>Buttons Style</h4>
<div class="p-5 mb-4 bg-light">
<div class="row align-items-center gy-3 gx-3">
<div class="col-auto"><a href="#" class="th-btn">Appointment</a></div>
<div class="col-auto"><a href="#" class="th-btn">Appointment<i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="th-btn style2"><span class="btn-icon"><i class="far fa-plus"></i></span><span class="btn-text">Register Now</span></a></div>
</div>
</div>
<h4>Icon Button Style</h4>
<div class="p-5 mb-4 bg-light">
<div class="row align-items-center gy-3 gx-3">
<div class="col-auto"><a href="#" class="icon-btn"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style2"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style3"><i class="fal fa-arrow-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style1 btn-md"><i class="far fa-chevron-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style2 btn-md"><i class="far fa-chevron-right"></i></a></div>
<div class="col-auto"><a href="#" class="icon-btn style3 btn-md"><i class="far fa-chevron-right"></i></a></div>
</div>
</div>
</div>
</div>
<!--==============================
Footer Area
==============================-->
<footer class="footer-wrapper footer-layout1" data-bg-src="assets/img/bg/footer_bg_1.jpg">
<div class="container z-index-common">
<div class="newsletter-wrap">
<div class="newsletter-content">
<h2 class="sec-title">Subscribe for newsletter</h2>
</div>
<form class="newsletter-form">
<div class="form-group">
<input class="form-control" type="email" placeholder="Email Address" required="">
</div>
<button type="submit" class="th-btn shadow-1">Subscribe</button>
</form>
</div>
</div>
<div class="widget-area">
<div class="container">
<div class="row justify-content-between">
<div class="col-md-6 col-xl-auto">
<div class="widget footer-widget">
<div class="th-widget-about">
<div class="about-logo">
<a href="home-medical-clinic.html"><img src="assets/img/logo-footer.svg" alt="Mediax"></a>
</div>
<p class="about-text">Subscribe to out newsletter today to receive latest news administrate cost effective for tactical data.</p>
<p class="footer-info">
<i class="fal fa-location-dot"></i>
2478 Street City Ohio 90255
</p>
<p class="footer-info">
<i class="fal fa-envelope"></i>
<a href="mailto:info@mediax.com" class="info-box_link">info@mediax.com</a>
</p>
<p class="footer-info">
<i class="fal fa-phone"></i>
<a href="tel:+40276328246" class="info-box_link">+(402) 763 282 46</a>
</p>
</div>
</div>
</div>
<div class="col-md-6 col-xl-auto">
<div class="widget widget_nav_menu footer-widget">
<h3 class="widget_title">Quick Links</h3>
<div class="menu-all-pages-container">
<ul class="menu">
<li><a href="about.html">About Us</a></li>
<li><a href="about.html">Terms of Use</a></li>
<li><a href="service.html">Our Services</a></li>
<li><a href="faq.html">Help & FAQs</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">Privacy policy</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-xl-auto">
<div class="widget widget_nav_menu footer-widget">
<h3 class="widget_title">Popular service</h3>
<div class="menu-all-pages-container">
<ul class="menu">
<li><a href="service-details.html">Cardiology Care</a></li>
<li><a href="service-details.html">Urgent Care</a></li>
<li><a href="service-details.html">Orthopedic Care</a></li>
<li><a href="service-details.html">Diagnosis department</a></li>
<li><a href="service-details.html">Gastroenterology</a></li>
<li><a href="service-details.html">Therapy department</a></li>
<li><a href="service-details.html">Dental service</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-xl-auto">
<div class="widget footer-widget">
<h3 class="widget_title">Recent Posts</h3>
<div class="recent-post-wrap">
<div class="recent-post">
<div class="media-img">
<a href="blog-details.html"><img src="assets/img/blog/recent-post-2-1.jpg" alt="Blog Image"></a>
</div>
<div class="media-body">
<h4 class="post-title"><a class="text-inherit" href="blog-details.html">How Business Is Taking Over & What to Do About It</a></h4>
<div class="recent-post-meta">
<a href="blog.html"><i class="fal fa-calendar"></i>21 Jun, 2024</a>
</div>
</div>
</div>
<div class="recent-post">
<div class="media-img">
<a href="blog-details.html"><img src="assets/img/blog/recent-post-2-2.jpg" alt="Blog Image"></a>
</div>
<div class="media-body">
<h4 class="post-title"><a class="text-inherit" href="blog-details.html">Health vs. Wealth Navigate Business in Medicine</a></h4>
<div class="recent-post-meta">
<a href="blog.html"><i class="fal fa-calendar"></i>22 Jun, 2024</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="copyright-wrap">
<div class="container">
<div class="row gy-2 align-items-center">
<div class="col-md-7">
<p class="copyright-text">Copyright <i class="fal fa-copyright"></i> 2024 <a href="home-medical-clinic.html">Mediax</a>. All Rights Reserved.</p>
</div>
<div class="col-md-5 text-center text-md-end">
<div class="th-social">
<a href="https://www.facebook.com/"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.twitter.com/"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.whatsapp.com/"><i class="fab fa-whatsapp"></i></a>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--********************************
Code End Here
******************************** -->
<!-- Scroll To Top -->
<div class="scroll-top">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;"></path>
</svg>
</div>
<!--==============================
All Js File
============================== -->
<!-- Jquery -->
<script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
<!-- Swiper Js -->
<script src="assets/js/swiper-bundle.min.js"></script>
<!-- Bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Magnific Popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!-- Counter Up -->
<script src="assets/js/jquery.counterup.min.js"></script>
<!-- datetimepicker -->
<script src="assets/js/jquery.datetimepicker.min.js"></script>
<!-- Range Slider -->
<script src="assets/js/jquery-ui.min.js"></script>
<!-- Isotope Filter -->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!-- Main Js File -->
<script src="assets/js/main.js"></script>
</body>
</html>