900 lines
34 KiB
HTML
900 lines
34 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 Inc</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="Airtronix HTML 5 Template " />
|
||
|
||
<!-- 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>1048 S Sirrine Mesa, AZ, United States, Arizona 85210</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-6.webp);
|
||
"
|
||
></div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="inner-content">
|
||
<div class="title">
|
||
<h2>Maintenance Program</h2>
|
||
</div>
|
||
<div class="breadcrumb-menu">
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li
|
||
class="active"
|
||
style="color: #ccc;"
|
||
>
|
||
Maintenance Program
|
||
</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 src="assets/images/galleries/gallery-7.webp" 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>maintenance contract</h5>
|
||
</div>
|
||
<h2>Desert Breeze HVAC Care Plan</h2>
|
||
</div>
|
||
<div class="text">
|
||
<p>At Desert Breeze HVAC Care Plan, we specialize in keeping your seasonal home perfectly maintained while you’re away.
|
||
Whether you escape to cooler climates for summer or winter, our dedicated team ensures your Arizona property stays safe,
|
||
fficient, and ready for your return.</p>
|
||
</div>
|
||
|
||
<ul>
|
||
<li class="mb-3">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Bi-Monthly System Checkups</b> <br/> Preventative care during peak heat months
|
||
</li>
|
||
<li class="mb-3">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Smart Temperature Alerts</b> <br/> Immediate notifications if your home gets too hot
|
||
</li>
|
||
<li class="mb-3">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Pre-Arrival Tune-Up</b> <br/> AC serviced and ready before you return
|
||
</li>
|
||
<li class="mb-3">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Lockbox Service</b> <br/> Secure access for emergency repairs
|
||
</li>
|
||
<li class="mb-3">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>20% Discount on Repairs</b> <br/> Exclusive savings for contract holders
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Service Details page2 sec1-->
|
||
|
||
<!--Start Choose Style1-->
|
||
<section class="choose-style1">
|
||
<div
|
||
class="choose-style1__pattern"
|
||
style="background-image: url(assets/images/pattern/thm-pattern-1.png)"
|
||
></div>
|
||
<div class="choose-style1__shape-1">
|
||
<img src="assets/images/shapes/choose-style1-shape-1.png" alt="" />
|
||
</div>
|
||
<div class="choose-style1__inner">
|
||
<div class="container">
|
||
<div class="price-header">
|
||
<h1>Our Desert Breeze HVAC Care Plan</h1>
|
||
<p class="text-white mt-3">Choose the perfect plan for your needs</p>
|
||
</div>
|
||
|
||
<div class="pricing-container">
|
||
<!-- Desert Watch Card -->
|
||
<div class="pricing-card">
|
||
<div class="card-header">
|
||
<h3>Desert Watch</h3>
|
||
<p>For Seasonal Residents</p>
|
||
</div>
|
||
<div class="d-flex flex-column justify-content-between">
|
||
<div class="price">$49<span>/month*</span></div>
|
||
<div class="features">
|
||
<ul>
|
||
<li><i class="fas fa-check"></i> Pre-departure system inspection</li>
|
||
<li><i class="fas fa-check"></i> Bi-monthly remote monitoring</li>
|
||
<li><i class="fas fa-check"></i> Emergency response guarantee</li>
|
||
<li><i class="fas fa-check"></i> 20% discount on repairs</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-premium">Get Started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Year-Round Guardian Card -->
|
||
<div class="pricing-card">
|
||
<div class="card-header">
|
||
<h3>Snow-Bird Guardian</h3>
|
||
<p>For Full-Time Residents</p>
|
||
</div>
|
||
<div class="d-flex flex-column justify-content-between">
|
||
<div class="price">$79<span>/month*</span></div>
|
||
<div class="features">
|
||
<ul>
|
||
<li><i class="fas fa-check"></i> Quarterly professional tune-ups</li>
|
||
<li><i class="fas fa-check"></i> Filter replacements (4x/year)</li>
|
||
<li><i class="fas fa-check"></i> No overtime charges</li>
|
||
<li><i class="fas fa-check"></i> 15% discount on upgrades</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-premium">Get Started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Commercial Pro Card -->
|
||
<div class="pricing-card">
|
||
<div class="card-header">
|
||
<h3>Commercial Pro</h3>
|
||
<p>For Business Properties</p>
|
||
</div>
|
||
<div class="d-flex flex-column justify-content-between">
|
||
<div class="price">Custom<span> Pricing</span></div>
|
||
<div class="features">
|
||
<ul>
|
||
<li><i class="fas fa-check"></i> Monthly inspections</li>
|
||
<li><i class="fas fa-check"></i> After-hours priority</li>
|
||
<li><i class="fas fa-check"></i> Dedicated account manager</li>
|
||
<li><i class="fas fa-check"></i> Energy efficiency reports</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-footer">
|
||
<button class="btn btn-premium">Get Started</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Choose Style1-->
|
||
|
||
<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/air.png"
|
||
alt="air Logo"
|
||
title=""
|
||
/>
|
||
</a>
|
||
</div>
|
||
<div class="text">
|
||
<p style="color: black;">
|
||
Air & Water Mechanical Inc. – Tucson’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 Inc</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>
|
||
.price-header {
|
||
text-align: center;
|
||
margin-bottom: 50px;
|
||
}
|
||
|
||
.price-header h1 {
|
||
color: white;
|
||
font-weight: 700;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.price-header h1:after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 50%;
|
||
height: 3px;
|
||
background: oklch(0.444 0.177 26.899);
|
||
bottom: -10px;
|
||
left: 25%;
|
||
}
|
||
|
||
.pricing-container {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 30px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.pricing-card {
|
||
background: white;
|
||
border-radius: 15px;
|
||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
position: relative;
|
||
}
|
||
|
||
.pricing-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.pricing-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 5px;
|
||
background: var(--primary-red);
|
||
}
|
||
|
||
.card-header {
|
||
background: var(--primary-blue);
|
||
color: white;
|
||
padding: 25px;
|
||
text-align: center;
|
||
}
|
||
|
||
.card-header h3 {
|
||
color: white;
|
||
font-weight: 700;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card-header p {
|
||
opacity: 0.8;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.price {
|
||
font-size: 2.5rem;
|
||
font-weight: 700;
|
||
color: var(--primary-blue);
|
||
text-align: center;
|
||
padding: 20px 0;
|
||
position: relative;
|
||
}
|
||
|
||
.price::after {
|
||
content: '';
|
||
position: absolute;
|
||
width: 50%;
|
||
height: 1px;
|
||
background: rgba(0, 0, 0, 0.1);
|
||
bottom: 0;
|
||
left: 25%;
|
||
}
|
||
|
||
.price span {
|
||
font-size: 1rem;
|
||
font-weight: 400;
|
||
color: #6c757d;
|
||
}
|
||
|
||
.features {
|
||
padding: 20px;
|
||
}
|
||
|
||
.features ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.features li {
|
||
padding: 10px 0;
|
||
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.features li:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.features i {
|
||
color: var(--primary-red);
|
||
margin-right: 10px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.card-footer {
|
||
background: transparent;
|
||
border-top: none;
|
||
padding: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-premium {
|
||
background: var(--primary-red);
|
||
color: white;
|
||
border: none;
|
||
padding: 10px 25px;
|
||
border-radius: 50px;
|
||
font-weight: 600;
|
||
transition: all 0.3s ease;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1px;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.btn-premium:hover {
|
||
background: #b51e2d;
|
||
color: white;
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(214, 40, 57, 0.3);
|
||
}
|
||
|
||
@media (max-width: 1200px) {
|
||
.pricing-container {
|
||
grid-template-columns: repeat(1, 1fr);
|
||
align-items: center;
|
||
max-width: 560px;
|
||
margin: auto;
|
||
}
|
||
|
||
.price-header {
|
||
padding-top: 5em;
|
||
}
|
||
}
|
||
|
||
/* Animation */
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.pricing-card {
|
||
animation: fadeInUp 0.6s ease forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.pricing-card:nth-child(1) {
|
||
animation-delay: 0.1s;
|
||
}
|
||
|
||
.pricing-card:nth-child(2) {
|
||
animation-delay: 0.3s;
|
||
}
|
||
|
||
.pricing-card:nth-child(3) {
|
||
animation-delay: 0.5s;
|
||
}
|
||
</style>
|
||
</body>
|
||
</html>
|