new-air-and-water-mechanical/plumbing-repair.html

987 lines
39 KiB
HTML
Raw 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>Plumbing Repair</h2>
</div>
<div class="breadcrumb-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li
class="active"
style="color: #ccc;"
>
Plumbing Repair
</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>Plumbing Repair</h5>
</div>
<h2>Plumbing Services by Air & Water Mechanical</h2>
</div>
<div class="text">
<p>If theres a plumbing problem in your home, Air & Water Mechanical Plumbing will fix it. Air & Water Mechanical plumbers are background-checked and highly trained, therefore, youll be getting a quality technician to service your homes plumbing network. Air & Water Mechanical plumbers have years of experience repairing residential plumbing systems; there isnt an issue they have not tackled, including:</p>
</div>
<ul class="service-list-body">
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Ceiling Leak Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Copper Pipe Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Drain Cleaning</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Drain Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Drain Trap Treatment</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Electronic Leak Detection</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Emergency Cleanup</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Fixture Replacement</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Garbage Disposal Repair / Replacement</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Gas Line Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Grease Trap Treatment</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Leak Detection</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Pipe Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Sewer Cleanout</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Sewer Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Sewer Replacement</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Toilet Leak Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Unclogging & Cleaning</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Tankless Water Heater Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Underground Leak Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Underground Pipe Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Video Inspections</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Water Heaters & Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Water Jet Cleaning</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Water Line Repair</b>
</li>
<li class="service-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Water Main Repair</b>
</li>
</ul>
<h3>Have A Plumbing Emergency?</h3>
<p>Air & Water Mechanical Plumbing will respond promptly to emergency calls. We operate 24/7, 365 days/year. Please call us at 480-706-3333 now! Air & Water Mechanical plumbing professionals can help you quickly and efficiently.</p>
<h3>Common Plumbing Problems Can Be Prevented</h3>
<p>An annual plumbing inspection prevents minor plumbing issues from turning into catastrophic and highly expensive repairs. Thousands of customers get an annual plumbing inspection through the Air & Water Mechanical Club.</p>
<div class="membership-benefits">
<h3>Benefits Of Air & Water Mechanical Club Membership Include:</h3>
<ul class="benefit-list">
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>FREE white glove health and safety inspection annually <span class="value">$200 Value</span></b>
</li>
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>$126 in coupons <span class="members-only">members only</span></b>
</li>
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>15% discount on any repairs</b>
</li>
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Priority scheduling for all plumbing services</b>
</li>
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Automatic extended 2-year warranties</b>
</li>
<li class="benefit-item">
<div class="icon">
<span class="icon-checkmark"></span>
</div>
<b>Peace of mind for pennies a day</b>
</li>
</ul>
<p>Contact us to apply for an Air & Water Mechanical EXCELLENCE CLUB membership.</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>