906 lines
40 KiB
HTML
906 lines
40 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Air & Water Mechanical</title>
|
||
<!-- Favicons Icons -->
|
||
<link
|
||
rel="apple-touch-icon"
|
||
sizes="180x180"
|
||
href="assets/images/logo/air.png"
|
||
/>
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
sizes="32x32"
|
||
href="assets/images/logo/air.png"
|
||
/>
|
||
<link
|
||
rel="icon"
|
||
type="image/png"
|
||
sizes="16x16"
|
||
href="assets/images/logo/air.png"
|
||
/>
|
||
<link rel="manifest" href="assets/images/favicons/site.webmanifest" />
|
||
<meta name="description" content="Air & Water Mechanical" />
|
||
|
||
|
||
<!-- Fonts -->
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Yantramanav:wght@100;300;400;500;700;900&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
|
||
<link rel="stylesheet" href="assets/vendors/animate/animate.min.css" />
|
||
<link rel="stylesheet" href="assets/vendors/animate/custom-animate.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/vendors/bootstrap/css/bootstrap.min.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/vendors/bxslider/jquery.bxslider.css" />
|
||
<link rel="stylesheet" href="assets/vendors/fontawesome/css/all.min.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/vendors/jquery-ui/jquery-ui.css" />
|
||
<link rel="stylesheet" href="assets/vendors/nice-select/nice-select.css" />
|
||
<link rel="stylesheet" href="assets/vendors/odometer/odometer.min.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/vendors/owl-carousel/owl.carousel.min.css"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/vendors/owl-carousel/owl.theme.default.min.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/vendors/swiper/swiper.min.css" />
|
||
<link rel="stylesheet" href="assets/vendors/vegas/vegas.min.css" />
|
||
<link rel="stylesheet" href="assets/vendors/thm-icons/style.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/vendors/language-switcher/polyglot-language-switcher.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/vendors/fancybox/fancybox.min.css" />
|
||
<link rel="stylesheet" href="assets/vendors/aos/aos.css" />
|
||
|
||
<!-- Module css -->
|
||
<link rel="stylesheet" href="assets/css/module-css/01-header-section.css" />
|
||
<link rel="stylesheet" href="assets/css/module-css/02-banner-section.css" />
|
||
<link rel="stylesheet" href="assets/css/module-css/03-about-section.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/css/module-css/04-fact-counter-section.css"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/css/module-css/05-testimonial-section.css"
|
||
/>
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/css/module-css/06-partner-section.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/css/module-css/07-footer-section.css" />
|
||
<link rel="stylesheet" href="assets/css/module-css/08-blog-section.css" />
|
||
<link
|
||
rel="stylesheet"
|
||
href="assets/css/module-css/09-breadcrumb-section.css"
|
||
/>
|
||
<link rel="stylesheet" href="assets/css/module-css/10-contact.css" />
|
||
|
||
<!-- Template styles -->
|
||
<link rel="stylesheet" href="assets/css/style.css" />
|
||
<link rel="stylesheet" href="assets/css/responsive.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page-wrapper boxed_wrapper">
|
||
<header class="main-header main-header-style4">
|
||
<!--Start Main Header Style2 Top-->
|
||
<div class="main-header-style2__top">
|
||
<div class="container">
|
||
<div class="main-header-style2__top-inner">
|
||
<!--Start Main Header Style2 Top Left-->
|
||
<div class="main-header-style2-top-left">
|
||
<div class="phone-number-box-style2">
|
||
<h3>
|
||
Call us for a Free Quote :
|
||
<a href="tel:480706333">(480) 706-333</a>
|
||
</h3>
|
||
</div>
|
||
<div class="consultation-box svg-container">
|
||
<img src="assets/images/icon/bbb-icon.svg" alt="BBB Icon" />
|
||
</div>
|
||
</div>
|
||
<!--End Main Header Style2 Top Left-->
|
||
|
||
<!--Start Main Header Style2 Top Right-->
|
||
<div class="main-header-style2-top-right">
|
||
<div class="header-social-link-style1">
|
||
<ul class="clearfix">
|
||
<li>
|
||
<a href="https://www.facebook.com/airandwatermechanical/">
|
||
<i class="fab fa-facebook-f"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.instagram.com/airwatermechanical/">
|
||
<i class="fab fa-instagram"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.youtube.com/channel/UC40ZVdaGGLBiVZQBBNz1U5A/featured">
|
||
<i class="fab fa-youtube"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="icon text-white">
|
||
<span class="icon-location" style="margin-right: 10px;"></span>
|
||
<span>Serving Metro Phoenix</span>
|
||
</div>
|
||
</div>
|
||
<!--End Main Header Style2 Top Right-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End Main Header Style2 Top-->
|
||
|
||
<!--Start Main Menu Style2-->
|
||
<nav class="main-menu main-menu-style2">
|
||
<div class="main-menu__wrapper clearfix">
|
||
<div class="container">
|
||
<div class="main-menu__wrapper-inner">
|
||
<div class="main-menu-style2-left">
|
||
<div class="logo-box-style1">
|
||
<a href="index.html">
|
||
<img src="assets/images/logo/air.png" alt="Logo" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<div class="main-menu-style2-right">
|
||
<div class="main-menu-box">
|
||
<a href="#" class="mobile-nav__toggler">
|
||
<i class="icon-bars"></i>
|
||
</a>
|
||
<ul class="main-menu__list">
|
||
<li>
|
||
<a href="index.html">Home</a>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="services.html">HVAC Services</a>
|
||
<ul>
|
||
<li><a href="service-detail.html?service=ac-repair">AC Repair</a></li>
|
||
<li><a href="service-detail.html?service=ac-installation">AC Installation</a></li>
|
||
<li><a href="service-detail.html?service=ac-maintenance">AC Maintenance</a></li>
|
||
<li><a href="service-detail.html?service=air-quality">Air Quality Solutions</a></li>
|
||
<li><a href="ductless-ac.html">Ductless AC</a></li>
|
||
<li><a href="commercial-hvac.html">Commercial HVAC</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li class="dropdown">
|
||
<a href="plumbing.html">Plumbing Services</a>
|
||
<ul>
|
||
<li><a href="plumbing-inspection.html">Plumbing Inspection</a></li>
|
||
<li><a href="plumbing-repair.html">Plumbing Repair</a></li>
|
||
<li><a href="water-heaters.html">Water Heaters</a></li>
|
||
<li><a href="tankless-water-heaters.html">Tankless Water Heater</a></li>
|
||
<li><a href="hydro-jetting.html">Hydro Jetting</a></li>
|
||
<li><a href="under-slab-plumbing.html">Under Slab Plumbing</a></li>
|
||
<li><a href="slab-leak-detection.html">Slab Leak Detection</a></li>
|
||
<li><a href="commercial-plumbing-service.html">Commercial Plumbing Service</a></li>
|
||
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="about.html">About Us</a>
|
||
</li>
|
||
<li>
|
||
<a href="service-area.html">Service Area</a>
|
||
</li>
|
||
<li>
|
||
<a href="contact-us.html">Contact Us</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<!--End Main Menu Style2-->
|
||
</header>
|
||
|
||
<div
|
||
class="stricky-header stricky-header--style4 stricked-menu main-menu"
|
||
>
|
||
<div class="sticky-header__content"></div>
|
||
<!-- /.sticky-header__content -->
|
||
</div>
|
||
<!-- /.stricky-header -->
|
||
|
||
<!--Start breadcrumb area-->
|
||
<section class="breadcrumb-area">
|
||
<div class="breadcrumb-area__inner">
|
||
<div
|
||
class="breadcrumb-area-bg"
|
||
style="
|
||
background-image: url(assets/images/breadcrumb/breadcrumb-5.webp);
|
||
"
|
||
></div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="inner-content">
|
||
<div class="title">
|
||
<h2 id="crumb-title"></h2>
|
||
</div>
|
||
<div class="breadcrumb-menu">
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li
|
||
class="active"
|
||
style="color: #ccc;"
|
||
id="crumb"
|
||
>
|
||
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End breadcrumb area-->
|
||
|
||
<!--Start Service Details page2 sec1-->
|
||
<section class="service-details-page2-sec1">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="service-details-page2-sec1__image">
|
||
<div class="inner">
|
||
<img id="service-img" src="assets/images/services/service-details-page2-img-1.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xl-6">
|
||
<div class="service-details-page2-sec1__content">
|
||
<div class="sec-title">
|
||
<div class="sub-title">
|
||
<div class="border-left"></div>
|
||
<h5 id="service-detail">service details</h5>
|
||
</div>
|
||
<h2 class="text-blue" id="service-title"></h2>
|
||
</div>
|
||
<div class="text">
|
||
<p id="service-description">There are many variations of passages of Lorem Ipsum available, but the majority have
|
||
suffered alteration in some form, by injected humour, or randomised words which
|
||
don't look even slightly believable. If you are going to use a passage of Lorem
|
||
Ipsum, you need to be sure there isn't anything embarrassing hidden.</p>
|
||
</div>
|
||
|
||
<ul id="service-features">
|
||
|
||
</ul>
|
||
|
||
<div class="bottom-text" id="second-description">
|
||
<p>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Service Details page2 sec1-->
|
||
|
||
<!--Start Service Details Style3 -->
|
||
<section class="service-details-style3 pb-5 pt-0">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-9">
|
||
<div class="service-details-style3__content">
|
||
<div class="inner-title">
|
||
<h2 class="text-blue">Images</h2>
|
||
<p>At Air & Water Mechanical, we understand just how brutal Phoenix summers can be. Keeping your home’s air conditioning system in top shape is our priority! No matter the issue, we’ve got the solution to restore your comfort quickly. When your A/C stops working, we’ll be there to save the day. Call us or schedule your service online today, and discover why we’re recognized as one of the best A/C companies in Air & Water Mechanical!</p>
|
||
</div>
|
||
<div class="service-details-style3-img-box">
|
||
<div class="row">
|
||
<!--Start Single Img Box-->
|
||
<div class="col-xl-4 col-lg-4">
|
||
<div class="single-img-box">
|
||
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home3.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
<!--End Single Img Box-->
|
||
<!--Start Single Img Box-->
|
||
<div class="col-xl-4 col-lg-4">
|
||
<div class="single-img-box">
|
||
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home4.jpg" alt="">
|
||
</div>
|
||
</div>
|
||
<!--End Single Img Box-->
|
||
<!--Start Single Img Box-->
|
||
<div class="col-xl-4 col-lg-4">
|
||
<div class="single-img-box">
|
||
<img style="height: 250px; object-fit: cover;" src="assets/images/home/home2.jpg" alt="">
|
||
<!-- <div class="video-gallery-style2">
|
||
<div class="icon wow zoomIn animated animated" data-wow-delay="300ms"
|
||
data-wow-duration="1500ms"
|
||
style="visibility: visible; animation-duration: 1500ms; animation-delay: 300ms; animation-name: zoomIn;">
|
||
<a class="video-popup" title="Video Gallery"
|
||
href="https://www.youtube.com/watch?v=06dV9txztKY">
|
||
<span class="icon-play"></span>
|
||
</a>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!--End Single Img Box-->
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- <div class="service-details-style3-bottom-text">
|
||
<h2>Benefit of Service</h2>
|
||
<p>Duis quis faucibus dolor. Nulla nulla justo, posuere eu aliquam a, tristique sed
|
||
nisi. Suspendisse vel erat mauris. Maecenas maximus sed nisl imperdiet eleifend.
|
||
Mauris suscipit .</p>
|
||
|
||
<div class="list-items">
|
||
<div class="row">
|
||
|
||
<ul id="service-benefits" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xl-3">
|
||
<div class="service-details-sidebar-box-style2">
|
||
<div class="service-details-contact-info-box">
|
||
<div class="img-box">
|
||
<img src="assets/images/resources/service-details-contact-info.jpg" alt="">
|
||
<div class="img-holder-img-bg"></div>
|
||
</div>
|
||
<div class="title-box">
|
||
<h3>Available<br> <span>for any type of<br> Service</span></h3>
|
||
<h2>We can help</h2>
|
||
<div class="btn-box">
|
||
<a class="btn-fix btn-fix-red py-3 px-5" href="contact-us.html">
|
||
<span class="txt">
|
||
contact us
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="sidebar-download-box">
|
||
<div class="inner-title">
|
||
<h2>Download</h2>
|
||
</div>
|
||
<div class="dwn-btn">
|
||
<a class="btn-fix btn-fix-blue" href="#">
|
||
<span class="txt">
|
||
Download Brochure
|
||
<i class="icon-download"></i>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div> -->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Service Details Style3 -->
|
||
|
||
|
||
<div class="bottom-parallax">
|
||
<!--Start footer area -->
|
||
<footer class="footer-area">
|
||
<!--Start Footer Top-->
|
||
<div class="footer-top">
|
||
<div
|
||
class="footer-top__bg"
|
||
style="
|
||
background-image: url(assets/images/pattern/thm-pattern-1.png);
|
||
"
|
||
></div>
|
||
<div class="container">
|
||
<div class="footer-top__inner">
|
||
<ul class="footer-contact-info-box1">
|
||
<li>
|
||
<div class="footer-contact-info-box1__single">
|
||
<div class="icon map">
|
||
<span class="icon-location"></span>
|
||
</div>
|
||
<div class="text">
|
||
<p>
|
||
Servicing:<br />
|
||
<h5><a target="_blank" href="https://maps.app.goo.gl/N5aEwupa7DoLP6xy9"
|
||
>1048 S Sirrine, Mesa, AZ, United States, Arizona</a
|
||
></h5>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="footer-contact-info-box1__single">
|
||
<div class="icon">
|
||
<span class="icon-mail"></span>
|
||
</div>
|
||
<div class="text">
|
||
<p>Email Us:</p>
|
||
<h5>
|
||
<a href="mailto:dispatch@airwateraz.com"
|
||
>dispatch@airwateraz.com</a
|
||
>
|
||
</h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<div class="footer-contact-info-box1__single">
|
||
<div class="icon">
|
||
<span class="icon-phone-call"></span>
|
||
</div>
|
||
<div class="text">
|
||
<p>Call Us:</p>
|
||
<h5><a href="tel:480706333">+ (480) 706-333</a></h5>
|
||
</div>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End Footer Top-->
|
||
|
||
<!--Start Footer Top-->
|
||
<div class="footer-main">
|
||
<div class="container">
|
||
<div class="row">
|
||
<!--Start single footer widget-->
|
||
<div class="col-xl-4 col-lg-6 col-md-6 col-sm-12 single-widget">
|
||
<div class="single-footer-widget">
|
||
<div class="our-company-info">
|
||
<div class="footer-logo-style1">
|
||
<a href="index.html">
|
||
<img
|
||
src="assets/images/logo/AWM-logo.png"
|
||
alt="Awesome Logo"
|
||
title=""
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div class="text">
|
||
<p style="color: black;">
|
||
Air & Water Mechanical. – Phoenix’s trusted provider of honest, affordable HVAC solutions, dedicated to ensuring comfort in every home we serve.
|
||
</p>
|
||
</div>
|
||
<div class="footer-social-link">
|
||
<ul class="clearfix">
|
||
<li>
|
||
<a href="https://www.facebook.com/airandwatermechanical/">
|
||
<i class="fab fa-facebook-f"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.instagram.com/airwatermechanical/">
|
||
<i class="fab fa-instagram"></i>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="https://www.youtube.com/channel/UC40ZVdaGGLBiVZQBBNz1U5A/featured">
|
||
<i class="fab fa-youtube"></i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End single footer widget-->
|
||
|
||
<!--Start single footer widget-->
|
||
<div class="col-xl-2 col-lg-6 col-md-6 col-sm-12 single-widget">
|
||
<div
|
||
class="single-footer-widget single-footer-widget--link-box margin-leftminus1"
|
||
>
|
||
<div class="title">
|
||
<h3>Company Info</h3>
|
||
</div>
|
||
<div class="footer-widget-links">
|
||
<ul>
|
||
<li><a href="/">Home</a></li>
|
||
<li><a href="#">HVAC Services</a></li>
|
||
<li><a href="#">Plumbing Services</a></li>
|
||
<li><a href="about.html">About Us</a></li>
|
||
<li><a href="#">Service Area</a></li>
|
||
<li><a href="#">Contact Us</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End single footer widget-->
|
||
|
||
<!--Start single footer widget-->
|
||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 single-widget">
|
||
<div
|
||
class="single-footer-widget single-footer-widget--link-box"
|
||
>
|
||
<div class="title">
|
||
<h3>Our Services</h3>
|
||
</div>
|
||
<div class="footer-widget-links">
|
||
<ul>
|
||
<li><a href="#">AC Repair</a></li>
|
||
<li>
|
||
<a href="#">AC Installation</a>
|
||
</li>
|
||
<li><a href="#">AC Maintenance</a></li>
|
||
<li><a href="#">Air Quality Solutions</a></li>
|
||
<li><a href="#">Refrigeration</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End single footer widget-->
|
||
|
||
<!--Start single footer widget-->
|
||
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-12 single-widget">
|
||
<div class="single-footer-widget">
|
||
<div class="single-footer-widget__img-box">
|
||
<img
|
||
src="assets/images/footer/single-footer-widget-img-1.png"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End single footer widget-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--End Footer Top-->
|
||
|
||
<div class="footer-bottom">
|
||
<div class="container">
|
||
<div class="bottom-inner">
|
||
<div class="copyright-text">
|
||
<p>
|
||
© Copyright <a href="/">Air & Water Mechanical</a> 2025.
|
||
All right reserved.<br />
|
||
</p>
|
||
</div>
|
||
<!-- <div class="footer-bottom-right">
|
||
<p>
|
||
Created by
|
||
<a href="https://rankrunners.net/portfolio">RankRunners</a>
|
||
</p>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!--End footer area-->
|
||
</div>
|
||
</div>
|
||
<!-- /.page-wrapper -->
|
||
|
||
<div class="mobile-nav__wrapper">
|
||
<div class="mobile-nav__overlay mobile-nav__toggler"></div>
|
||
<div class="mobile-nav__content">
|
||
<span class="mobile-nav__close mobile-nav__toggler">
|
||
<i class="icon-close"></i>
|
||
</span>
|
||
<div class="logo-box w-75">
|
||
<a href="index.html" aria-label="logo image">
|
||
<img src="assets/images/logo/logo.webp" alt="" />
|
||
</a>
|
||
</div>
|
||
<div class="mobile-nav-search-box">
|
||
<form class="search-form" action="#">
|
||
<input placeholder="Keyword" type="text" />
|
||
<button type="submit">
|
||
<i class="icon-magnifying-glass"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
<div class="mobile-nav__container"></div>
|
||
<ul class="mobile-nav__contact list-unstyled">
|
||
<li>
|
||
<i class="fa fa-envelope"></i>
|
||
<a href="mailto:info@example.com">info@example.com</a>
|
||
</li>
|
||
<li>
|
||
<i class="fa fa-phone-alt"></i>
|
||
<a href="tel:123456789">444 000 777 66</a>
|
||
</li>
|
||
</ul>
|
||
<div class="mobile-nav__social">
|
||
<a href="#" class="fab fa-facebook-square"></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-popup">
|
||
<div class="search-popup__overlay search-toggler"></div>
|
||
<div class="search-popup__content">
|
||
<form action="#">
|
||
<label for="search" class="sr-only">search here</label>
|
||
<input type="text" id="search" placeholder="Search Here..." />
|
||
<button type="submit" aria-label="search submit" class="thm-btn">
|
||
<i class="icon-magnifying-glass"></i>
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!--Scroll to top-->
|
||
<div class="scroll-to-top">
|
||
<div>
|
||
<div class="scroll-top-inner">
|
||
<div class="scroll-bar">
|
||
<div class="bar-inner"></div>
|
||
</div>
|
||
<div class="scroll-bar-text">Go To Top</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- Scroll to top end -->
|
||
|
||
<script src="assets/vendors/jquery/jquery-3.6.0.min.js"></script>
|
||
<script src="assets/vendors/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||
<script src="assets/vendors/bxslider/jquery.bxslider.min.js"></script>
|
||
<script src="assets/vendors/circleType/jquery.circleType.js"></script>
|
||
<script src="assets/vendors/circleType/jquery.lettering.min.js"></script>
|
||
<script src="assets/vendors/isotope/isotope.js"></script>
|
||
<script src="assets/vendors/jquery-ajaxchimp/jquery.ajaxchimp.min.js"></script>
|
||
<script src="assets/vendors/jquery-appear/jquery.appear.min.js"></script>
|
||
<script src="assets/vendors/jquery-magnific-popup/jquery.magnific-popup.min.js"></script>
|
||
<script src="assets/vendors/jquery-migrate/jquery-migrate.min.js"></script>
|
||
<script src="assets/vendors/jquery-ui/jquery-ui.js"></script>
|
||
<script src="assets/vendors/jquery-validate/jquery.validate.min.js"></script>
|
||
<script src="assets/vendors/nice-select/jquery.nice-select.min.js"></script>
|
||
<script src="assets/vendors/odometer/odometer.min.js"></script>
|
||
<script src="assets/vendors/owl-carousel/owl.carousel.min.js"></script>
|
||
<script src="assets/vendors/swiper/swiper.min.js"></script>
|
||
<script src="assets/vendors/vegas/vegas.min.js"></script>
|
||
<script src="assets/vendors/wnumb/wNumb.min.js"></script>
|
||
<script src="assets/vendors/wow/wow.js"></script>
|
||
<script src="assets/vendors/extra-scripts/jquery.paroller.min.js"></script>
|
||
<script src="assets/vendors/language-switcher/jquery.polyglot.language.switcher.js"></script>
|
||
<script src="assets/vendors/extra-scripts/jquery-sidebar-content.js"></script>
|
||
<script src="assets/vendors/fancybox/jquery.fancybox.js"></script>
|
||
<script src="assets/vendors/aos/aos.js"></script>
|
||
<script src="assets/vendors/extra-scripts/TweenMax.min.js"></script>
|
||
|
||
<!-- Template js -->
|
||
<script src="assets/js/custom.js"></script>
|
||
<style>
|
||
#service-grid{
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
}
|
||
|
||
@media only screen and (max-width: 767px) {
|
||
#service-grid{
|
||
grid-template-columns: repeat(1, 1fr);
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Service Data (could also be fetched from an API)
|
||
const services = {
|
||
"ac-repair": {
|
||
header: 'AC Repair',
|
||
image: 'assets/images/home/repair.jpg',
|
||
title: "Emergency AC Repair Services",
|
||
description: `When your air conditioner breaks down during Phoenix's scorching heat waves, every minute matters. That’s why our NATE-certified technicians are ready to respond quickly, 365 days a year. Whether it's a refrigerant leak or a compressor failure, we’re equipped to tackle it all. With fully-stocked trucks carrying essential replacement parts, we resolve 85% of repairs on the first visit, ensuring you get back to comfort faster. `,
|
||
features: [
|
||
"Same-day service for most residential repairs",
|
||
"Advanced diagnostics with digital reporting",
|
||
"Repairs on all brands (including vintage systems)",
|
||
"90-day labor warranty on all work",
|
||
"Emergency service available nights/weekends"
|
||
],
|
||
benefits: [
|
||
"Prevent secondary damage from prolonged system failure",
|
||
"Maintain manufacturer warranty compliance",
|
||
"Improve energy efficiency by up to 25%",
|
||
"Extend equipment lifespan with proper repairs",
|
||
"Avoid costly replacement with timely intervention"
|
||
],
|
||
secondDesc: `Unlike handymen or general contractors,
|
||
we specialize exclusively in HVAC systems, ensuring your repair meets manufacturer specifications and local building codes.
|
||
Our diagnostic process includes thermal imaging and airflow measurements to identify root causes, not just symptoms.`
|
||
},
|
||
"ac-installation": {
|
||
header: 'AC Installation',
|
||
image: 'assets/images/home/repair2.jpg',
|
||
title: "Custom Cooling Solutions Engineered for Phoenix Homes",
|
||
description: `A proper A/C installation is about more than just swapping out equipment—it’s about precision. Our 27-point installation process starts with a Manual J load calculation, ensuring we accurately assess your home’s cooling needs based on factors like window orientation, insulation quality, and local climate patterns. From there, we design a tailored system that fits both your budget and usage habits, whether you’re seeking a high-efficiency inverter system for reliable comfort or a commercial-grade unit for your business.`,
|
||
features: [
|
||
"Free in-home consultation with load calculation",
|
||
"Energy Star® certified equipment options",
|
||
"Ductwork design/redesign services",
|
||
"10-year parts/labor warranty options",
|
||
"Smart thermostat integration included"
|
||
],
|
||
benefits: [
|
||
"Eliminate hot/cold spots with properly sized equipment",
|
||
"Reduce energy costs by 30-50% with modern systems",
|
||
"Quieter operation through vibration-dampening installs",
|
||
"Increased home value with documented professional installation",
|
||
"Personalized climate zones available"
|
||
],
|
||
secondDesc: `Our installations include complete ductwork evaluation,
|
||
electrical safety checks, and post-installation performance testing to ensure optimal operation from day one.
|
||
We're authorized dealers for top brands like Trane, Carrier, and Mitsubishi, with access to exclusive manufacturer warranties.`
|
||
},
|
||
"ac-maintenance": {
|
||
header: 'AC Maintenance',
|
||
image: 'assets/images/home/home5.jpg',
|
||
title: "Comprehensive AC Maintenance Plans",
|
||
description: `Just like changing your car's oil, regular A/C maintenance is essential to prevent 90% of emergency breakdowns while ensuring peak efficiency. Our Gold and Platinum maintenance plans are specifically designed for Phoenix’s harsh climate, with a focus on dust filtration and condenser coil care. Every visit includes thorough checks of refrigerant levels, electrical components, and system calibration to ensure your unit can handle seasonal temperature fluctuations.`,
|
||
features: [
|
||
"Bi-annual tune-ups (spring/fall recommended)",
|
||
"28-point inspection checklist",
|
||
"Condensate drain line clearing",
|
||
"Airflow measurement & balancing",
|
||
"Discounts on repairs for members"
|
||
],
|
||
benefits: [
|
||
"Maintain manufacturer warranty requirements",
|
||
"Improve indoor air quality by reducing allergens",
|
||
"Extend system lifespan by 5-10 years",
|
||
"Lower energy bills through optimized performance",
|
||
"First priority during heat wave emergencies"
|
||
],
|
||
secondDesc: `Snowbird clients receive additional remote monitoring services, including smart thermostat alerts if temperatures exceed safe ranges while you're away.
|
||
Our maintenance customers enjoy priority scheduling and discounted repairs, with detailed service reports stored in your online customer portal for warranty documentation.`
|
||
},
|
||
"air-quality": {
|
||
header: 'Air Quality Solutions',
|
||
image: 'assets/images/services/service-6.webp',
|
||
title: "Breathe Cleaner in Your Phoenix Home",
|
||
description: `Phoenix's dust storms, pollen, and dry air present unique challenges for indoor air quality. Our advanced whole-home purification systems go beyond standard filters to tackle particulate matter, chemical vapors, and biological contaminants. We begin with a comprehensive air quality assessment, measuring PM2.5, VOCs, humidity levels, and CO2 concentrations to ensure your home’s air is clean and healthy.`,
|
||
features: [
|
||
"Professional air quality testing available",
|
||
"Medical-grade HEPA filtration systems",
|
||
"UV-C light installation for pathogen control",
|
||
"Whole-home dehumidification options",
|
||
"Duct sealing & sanitization services"
|
||
],
|
||
benefits: [
|
||
"Reduce asthma/allergy symptoms by up to 80%",
|
||
"Neutralize odors from pets, smoke, or cooking",
|
||
"Prevent mold growth through humidity control",
|
||
"Protect HVAC equipment from dust accumulation",
|
||
"Smart monitoring with real-time air quality data"
|
||
],
|
||
secondDesc: `Solutions may include hospital-grade HEPA filtration, UV-C germicidal lights, or whole-home
|
||
humidifiers depending on your family's specific needs (especially beneficial for allergy sufferers, infants, or elderly residents).
|
||
All systems integrate seamlessly with your existing HVAC equipment and include smart monitoring with mobile alerts when air quality changes.`
|
||
}
|
||
};
|
||
|
||
// DOM Elements (replace with your actual element IDs/classes)
|
||
const elements = {
|
||
serviceImg: document.getElementById('service-img'),
|
||
title: document.getElementById('service-title'),
|
||
crumbTitle: document.getElementById('crumb-title'),
|
||
serviceDetail: document.getElementById('service-detail'),
|
||
crumb: document.getElementById('crumb'),
|
||
description: document.getElementById('service-description'),
|
||
features: document.getElementById('service-features'),
|
||
benefits: document.getElementById('service-benefits'),
|
||
secondDesc: document.getElementById('second-description'),
|
||
};
|
||
|
||
// Function to render service data
|
||
function renderService(serviceId) {
|
||
const service = services[serviceId];
|
||
|
||
if (!service) {
|
||
console.error('Service not found');
|
||
window.location.href = '/services'; // Redirect if invalid service
|
||
return;
|
||
}
|
||
|
||
// Update DOM
|
||
elements.serviceImg.src = service.image;
|
||
elements.title.textContent = service.title;
|
||
elements.description.textContent = service.description;
|
||
// elements.secondDesc.textContent = service.secondDesc;
|
||
elements.crumbTitle.textContent = service.header;
|
||
elements.crumb.textContent = service.header;
|
||
elements.serviceDetail.textContent = service.header;
|
||
|
||
// Clear previous lists
|
||
elements.features.innerHTML = '';
|
||
elements.benefits.innerHTML = '';
|
||
|
||
// Render features
|
||
service.features.forEach(feature => {
|
||
const li = document.createElement('li');
|
||
|
||
li.innerHTML = `
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
${feature}
|
||
`;
|
||
|
||
elements.features.appendChild(li);
|
||
});
|
||
|
||
// Render benefits
|
||
service.benefits.forEach(benefits => {
|
||
const li = document.createElement('li');
|
||
|
||
li.innerHTML = `
|
||
<div class="icon">
|
||
<span class="icon-check-mark"></span>
|
||
</div>
|
||
${benefits}
|
||
`;
|
||
|
||
elements.benefits.appendChild(li);
|
||
});
|
||
|
||
// Update meta tags
|
||
document.title = `${service.title} | 520 Indoor Comfort`;
|
||
document.querySelector('meta[name="description"]').setAttribute('content',
|
||
service.description.substring(0, 160));
|
||
}
|
||
|
||
// Get service ID from URL
|
||
function getServiceId() {
|
||
const params = new URLSearchParams(window.location.search);
|
||
return params.get('service');
|
||
}
|
||
|
||
// Initialize
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
const serviceId = getServiceId();
|
||
if (serviceId) {
|
||
renderService(serviceId);
|
||
}
|
||
});
|
||
|
||
// For navigation (if needed)
|
||
function navigateToService(serviceId) {
|
||
window.history.pushState({}, '', `?service=${serviceId}`);
|
||
renderService(serviceId);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|