new-air-and-water-mechanical/hydro-jetting.html

845 lines
36 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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>Hydro Jetting</h2>
</div>
<div class="breadcrumb-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li
class="active"
style="color: #ccc;"
>
Hydro Jetting
</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>Hydro Jetting, Sewer Jetting, And Drain Jetting Services</h5>
</div>
<h2>Hydro Jetting, Sewer Jetting, And Drain Jetting Services For Residential And Commercial Plumbing Needs</h2>
</div>
<div class="text">
<p>Hydro jetting Greater Phoenix Area drain and sewer lines generally means using high-pressure water machines in drains and sewer lines to remove stoppages caused from tree roots, grease, or other materials. Our Greater Phoenix Area Hydro Jetting service is used to clean and clear clogged drains and sewer lines.</p>
<p>Air & Water Mechanical hydro jetting technology can be used for a variety of needs such as cleaning sewer lines and underground pipes. This hydro-jet drain technology must be done by specialized technicians who can do the work quickly and efficiently. These commercial plumbing grade hydro-jet drain and sewer machines are very expensive and complex and have a lot of power to remove and clear heavy grease and roots that most commonly are the reason for clogged, stopped up and backed up drains and sewer lines. But it can be used to remove lots of other heavy materials efficiently too, saving thousands in pipe or drain replacement (which Air & Water Mechanical does too) if drains are broken or cracked and need replacement.</p>
</div>
<h3>Top Five Reasons You Need To Hire A Hydro Jetting Company</h3>
<ul class="reasons-list">
<li><strong>01</strong> Fix emergency drain or sewer problems.</li>
<li><strong>02</strong> Get your drain or sewer lines flowing at full capacity.</li>
<li><strong>03</strong> Help clear the drain enough to use cameras or cable machinery.</li>
<li><strong>04</strong> Help prevent severe drain line or sewer pipe problems.</li>
<li><strong>05</strong> Eliminate risk of lost revenue and use of your commercial or retail facility.</li>
</ul>
<h2>Sewer Jetting And Hydro Jetting Services For Residential And Commercial Plumbing Needs</h2>
<div class="custom-text">
<p>Whether its pipes and drains in your home like kitchen and bathrooms to office parks, restaurants or commercial facilities including storm and sewer drainage, Air & Water Mechanicals hydro jetting service will solve most of your drain or sewer problems.</p>
<p>Our jetter has 500 feet of high pressure jetting hose which swivels and delivers pressurized cleaning water where needed. Air & Water Mechanical jetter is able to clean or clear sewer lines or pipes from 1-1/2” to 3” in diameter up to 18 inches.</p>
<p>Air & Water Mechanicals hydro-jetter equipment can work to clean all types of drain line systems. Our electric technology can be brought easily to your house, office, or any of your restaurants to clean your drainage systems.</p>
</div>
<h3>Greater Phoenix Area Drain And Sewer Hydro Jet Pressure Cleaning</h3>
<div class="custom-text">
<p>Sewer jetting or sewer hydro jetting can be referred to as drain jetting. Jetting is the most efficient process for cleaning or clearing clogged drain and sewer lines.</p>
<p>If your pipes are clogged with hardened grease, rust, dirt, roots or other debris and materials, call Air & Water Mechanical plumbing to get the most effective drain and sewer jetting service available in the Greater Phoenix Area.</p>
<p>Air & Water Mechanical guarantees all our work and provides quotes up front and can inspect your drain or sewer lines with a camera as needed. Jetting your drain or sewer lines first are critical in getting a clear video of the drain to see if theres any more problems or concerns that need to be addressed such as cracked or broken pipes, belly in the line or roots breaking through.</p>
<p>Air & Water Mechanical is a professional, licensed plumber in the Greater Phoenix Area that specializes in residential and commercial drain and sewer jetting services. Try Air & Water Mechanical sewer hydro jetting service today.</p>
</div>
<h3>Hydro Jetting Versus Power Washers</h3>
<div class="custom-text">
<p>Hydro jetting should only be done by licensed, insured professional drain and sewer professionals. There are many stories about people getting hurt, injured or even killed by high-pressure hoses getting loose and hurting those using the machine, including professionals. So when it comes to Hydro Jetting in the Greater Phoenix Area, this is not a job for do it yourselfers.</p>
<p>Hydro jetting uses very high pressure water, usually between 1,500 to 4,000 PSI (Pounds per Square Inch) and can even go up to 10,000 PSI and is used to clear and clean seriously clogged drains. Hydro jetting has mostly been used for commercial use such as hospitals, factories or restaurants but has become more commonly used in residential applications to clear home drain and sewer lines.</p>
</div>
<h3>How A Hydro Jet Works:</h3>
<div class="custom-text">
<p>A jet nozzle with a forward jet is always used to penetrate or cut through a root mass or blockage which allows the rear to fully move through the blockage. Nozzles with forward jets are only used to open a clogged sewer or drain line. Once flow has been re-established, an all rear jet is used to clean the line.</p>
<p>The jet pushing water forward clears the blockage initially, while the reverse flow (pushing water out of the back of the nozzle) helps the jet through the line.</p>
<p>In some cases, the tool will rotate to ensure the line is thoroughly cleaned. Only the power of the water moves the tool through the drain rather than being powered by electric motors. The electric motors, however, is critical in pressuring the water in the line for very effective drain cleaning and clearing sewer blockages.</p>
</div>
<h2>Why Choose Hydro Jetting For Your Drain And Sewer Lines</h2>
<ul class="custom-benefits-list">
<li>
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Hydro jetting sewer and drain lines can help prevent digging up and replacing pipes</b>
</li>
<li>
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Hydro jetting can quickly resolve clogged drain lines for residential and commercial</b>
</li>
<li>
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Hydro jetting is much more cost affordable than replacing drain and sewer lines</b>
</li>
</ul>
<div class="custom-text">
<p>Hiring a company like Air & Water Mechanical in the Greater Phoenix Area to hydro jet your drain lines is easy and much safer than trying to do it yourself.</p>
<p>Looking for hydro jetting services in the Greater Phoenix Area? <strong><a href="tel:480-706-3333" class="call-link">Call Air & Water Mechanical today</a></strong>.</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. Phoenixs 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>
&copy; 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>