842 lines
33 KiB
HTML
842 lines
33 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-6.webp);
|
||
"
|
||
></div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="inner-content">
|
||
<div class="title">
|
||
<h2>Commercial HVAC Services</h2>
|
||
</div>
|
||
<div class="breadcrumb-menu">
|
||
<ul>
|
||
<li><a href="index.html">Home</a></li>
|
||
<li
|
||
class="active"
|
||
style="color: #ccc;"
|
||
>
|
||
Commercial HVAC Services
|
||
</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-12">
|
||
<div class="service-details-page2-sec1__content">
|
||
<div class="sec-title">
|
||
<div class="sub-title">
|
||
<div class="border-left"></div>
|
||
<h5>Commercial HVAC Services</h5>
|
||
</div>
|
||
<h2>Air & Water Mechanical Commercial HVAC Services</h2>
|
||
</div>
|
||
<div class="service-list">
|
||
<h3>Commercial HVAC Installation Service in Mesa, AZ</h3>
|
||
<p>No matter what type of HVAC system you need, our service technicians are ready to handle the project. As a Trane Comfort Specialist, we have access to a wide range of energy-efficient commercial HVAC systems for every type of building and budget. Our mission is to make sure your commercial HVAC system positively impacts your bottom line. That means it’ll consume less energy, break down fewer times and maximize its service life.</p>
|
||
|
||
<h3>Commercial HVAC Repair and Replacement Service in Mesa, AZ</h3>
|
||
<p>A broken air conditioner or heater is bad for business. Every minute matters; that’s why Air & Water Mechanical Services, LLC offers 24/7 emergency commercial HVAC repair service in Phoenix, AZ and the surrounding areas. Our service technicians visit your business with a warehouse on wheels, and we can complete most commercial HVAC repairs in one visit. If your commercial HVAC system is beyond repair, rest assured we can recommend a replacement and take care of it right away.</p>
|
||
|
||
<h3>Trust Air & Water Mechanical Services, LLC for All Your Commercial HVAC Needs</h3>
|
||
<p>When commercial clients put their faith in Air & Water Mechanical Services, LLC, they know they will get the very best HVAC systems and services. That’s because we:</p>
|
||
<ul class="service-list-body">
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Dispatch NATE-certified service technicians to your commercial HVAC service.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Ensure service technicians pass drug tests and background checks.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Provide honest assessments and perform high-quality commercial HVAC repairs.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Achieve 100% satisfaction in all of our dealings with our commercial clients.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Offer a lifetime warranty on workmanship for all commercial HVAC services.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Assist with cash incentives provided by manufacturers, utility companies, etc.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Service all makes and models of commercial HVAC equipment.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Promote a safe environment with open and truthful communication.</b>
|
||
</li>
|
||
<li class="service-item">
|
||
<div class="icon">
|
||
<span class="icon-checkmark"></span>
|
||
</div>
|
||
<b>Do what we say and hold ourselves accountable with our customers.</b>
|
||
</li>
|
||
</ul>
|
||
<p>To schedule a commercial HVAC service in Phoenix, AZ and the surrounding areas, contact Air & Water Mechanical Services, LLC. Our team of air commercial HVAC experts is standing by to help your business succeed.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!--End Service Details page2 sec1-->
|
||
|
||
<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. – 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>
|
||
.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>
|