<!doctype html>
<html class="no-js" lang="zxx">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Poolax - Pool Cleaning & Services - Home One</title>
    <meta name="author" content="Themeholy">
    <meta name="description" content="Poolax - Pool Cleaning & Services">
    <meta name="keywords" content="Poolax - Pool Cleaning & Services">
    <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="144x144" href="assets/img/favicons/android-icon-144x144.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,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900&family=Outfit:wght@300;400;500;600;700;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">
    <!-- Slick Slider -->
    <link rel="stylesheet" href="assets/css/slick.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">
            <span class="loader"></span>
        </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-color2);">Theme Color 2</div>
                </div>
                <div class="col-xl-2">
                    <div class="p-4 text-white text-center" style="background-color: var(--theme-color3);">Theme Color 3</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(--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-social">Appointment</a></div>
                    <div class="col-auto"><a href="#" class="th-social">Appointment<i class="fal fa-arrow-right"></i></a></div>
                    <div class="col-auto"><a href="#" class="th-social 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>
    <!--==============================
Contact Info Area  
==============================-->
    <div class="contact-info-area" data-pos-for=".footer-layout3" data-sec-pos="bottom-half">
        <div class="container">
            <div class="row gx-0 align-items-center">
                <div class="col-xl-3">
                    <div class="contact-media style1">
                        <div class="contact-logo">
                            <img src="assets/img/logo.svg" alt="icon">
                        </div>
                    </div>
                </div>
                <div class="col-xl-9">
                    <div class="contact-media-wrapp">
                        <div class="contact-media bg-theme">
                            <div class="contact-media_icon">
                                <img src="assets/img/icon/contact_1_1.svg" alt="icon">
                            </div>
                            <div class="contact-media_content">
                                <span class="contact-media_subtitle">Call Us For Pool Services</span>
                                <h3 class="contact-media_title"><a href="tel:+46825476243">+(468) 254 76243</a></h3>
                            </div>
                        </div>
                        <div class="contact-media">
                            <div class="contact-media_icon">
                                <img src="assets/img/icon/contact_1_2.svg" alt="icon">
                            </div>
                            <div class="contact-media_content">
                                <p class="contact-media_subtitle">Email Us For Any Info.</p>
                                <a href="mailto:info@poolax.com" class="contact-media_title">info@poolax.com</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--==============================
	Footer Area
==============================-->
    <footer class="footer-wrapper footer-layout3" data-bg-src="assets/img/bg/footer_bg_3.jpg">
        <div class="widget-area">
            <div class="container">
                <div class="row justify-content-between">
                    <div class="col-md-6 col-xl-4">
                        <div class="widget footer-widget">
                            <h3 class="widget_title">About Company</h3>
                            <div class="th-widget-about">
                                <p class="about-text">We provide specialized winterization services to safeguard your pool during the off-season, and when spring arrives, we handle the thorough opening process.</p>
                                <div class="th-social  footer-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.instagram.com/"><i class="fab fa-instagram"></i></a>
                                    <a href="https://www.behance.net/"><i class="fa-brands fa-behance"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-2">
                        <div class="widget widget_nav_menu  footer-widget">
                            <h3 class="widget_title">Quick link</h3>
                            <div class="menu-all-pages-container">
                                <ul class="menu">
                                    <li><a href="about.html">About Us</a></li>
                                    <li><a href="gallery.html">gallery</a></li>
                                    <li><a href="testimonials.html">Testimonials</a></li>
                                    <li><a href="blog.html">Blog</a></li>
                                    <li><a href="contact.html">Contact Us</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <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">Installation of new Equipment</a></h4>
                                        <div class="recent-post-meta">
                                            <a href="blog.html"><i class="fal fa-calendar-days"></i>12 Oct, 2023</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">Installation of new Equipment</a></h4>
                                        <div class="recent-post-meta">
                                            <a href="blog.html"><i class="fal fa-calendar-days"></i>22 Oct, 2023</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-auto">
                        <div class="widget footer-widget footer-widget">
                            <h4 class="widget_title">Working Hours</h4>
                            <div class="th-widget-schedule">
                                <p class="footer-info">Monday to Wed............. <span>9am - 8pm</span></p>
                                <p class="footer-info">Thursday............. <span>9am - 7pm</span></p>
                                <p class="footer-info">Friday.............. <span>8am - 6pm</span></p>
                                <p class="footer-info">Saturday............. <span>10am - 4pm</span></p>
                                <p class="footer-info">Sunday.............. <span>Closed</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="copyright-wrap">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-12">
                        <p class="copyright-text text-white text-center">© 2023 <a href="https://themeforest.net/user/themeholy">Poolax</a>. All Rights
                            Reserved.</p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 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>
    </footer>

    <!--******************************** 
			Code End  Here 
	******************************** -->


    <!--==============================
    All Js File
============================== -->
    <!-- Jquery -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Isotope Filter -->
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!-- Magnific Popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Range Slider -->
    <script src="assets/js/jquery-ui.min.js"></script>
    <!-- imagesloaded  -->
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <!-- odometer -->
    <script src="assets/js/odometer.js"></script>
    <!-- Nice Select -->
    <script src="assets/js/nice-select.min.js"></script>

    <!-- circle-progress -->
    <script src="assets/js/circle-progress.js"></script>

    <script src="assets/js/jquery.ripples.js"></script>

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

</body>

</html>