/* ==========================================================
   ProCare Commercial Carpet Cleaning
   Theme Stylesheet
   ----------------------------------------------------------
   Author: Ton
   Version: 1.1

   Table of Contents

   1. CSS Variables
   2. Global
   3. Typography
   4. Links
   5. Buttons
   6. Top Header
   7. Navbar
   8. Hero
   9. Cards
   10. Tables
   11. Forms
   12. Sections
   13. Default Page Template
   14. Footer
   15. Utility Classes
========================================================== */


/* ==========================================================
   1. CSS VARIABLES
========================================================== */

:root {

    /* Backgrounds */
    --bg: #fafafa;
    --surface: #ffffff;

    /* Text */
    --heading: #555555;
    --text: #333333;
    --text-muted: #666666;

    /* Borders */
    --border: #e5e7eb;

    /* Brand Colors */
    --primary: #3b82f6;
    --primary-hover: #2563eb;
    --primary-light: #dbeafe;

    /* Success */
    --success: #16a34a;

    /* Border Radius */
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 16px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0,0,0,.05);
    --shadow-md: 0 10px 30px rgba(0,0,0,.08);

    /* Animation */
    --transition: .25s ease;
}


/* ==========================================================
   2. GLOBAL
========================================================== */

body {
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img {
    max-width: 100%;
    height: auto;
}

hr {
    border-color: var(--border);
}


/* ==========================================================
   3. TYPOGRAPHY
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .75rem;
}

/* Hero Heading */
h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}

/* Standard Heading */
h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
}

h3 {
    font-size: 1.5rem;
}

p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}


/* REUSABLE SECTION TYPOGRAPHY */

.section-header {
    max-width: 760px;
    margin: 0 auto 3rem;
}

.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 1rem;
}

.section-subtitle {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: 1rem;
}

.section-description {
    max-width: 760px;
    margin: 0 auto;
}

.section-description p:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   4. LINKS
========================================================== */

a {
    color: var(--primary);
    text-decoration: none;
    transition: var(--transition);
}

a:hover {
    color: var(--primary-hover);
}

a:visited {
    color: var(--primary);
}


/* ==========================================================
   5. BUTTONS
========================================================== */

.btn-primary,
.btn-primary:visited {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    padding: .8rem 1.5rem;
    font-weight: 600;
    transition: var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-hover);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    background: var(--primary-hover);
    color: #ffffff;
}

/* ==========================================================
   6. TOP HEADER
========================================================== */

/* Brand Logo
========================================================== */

.navbar-brand {
    padding: 0;
}

.custom-logo-link {
    display: block;
    line-height: 0;
}

.custom-logo {
    width: 400px;
    height: auto;
    display: block;
}

/* ==========================================================
   7. NAVBAR
========================================================== */

.site-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    padding: .85rem 0;
}


/* Navigation Links
========================================================== */

.navbar-nav {
    gap: .75rem;
}

.navbar-nav .menu-item a {
    color: #454b54;
    font-size: 1.2rem;
    font-weight: 500;
    padding: .9rem 1.25rem;
    text-decoration: none;
    transition: color .2s ease;
}


.navbar-nav .menu-item a:hover {
    color: var(--primary);
}


/* Active Menu */

.navbar-nav .current-menu-item a {
    color: var(--primary);
    font-weight: 500;
}


/* Mobile Menu
========================================================== */

.navbar-toggler {
    border: none;
    box-shadow: none !important;
    padding: .5rem;
}

.navbar-toggler:focus {
    box-shadow: none;
}


@media (max-width: 991.98px) {

    .navbar-nav {
        gap: 0;
        margin-top: 1rem;
    }

    .navbar-nav .menu-item a {
        padding: .75rem 1rem;
    }

}

/* ==========================================================
   8. HERO
========================================================== */

.hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    padding: 120px 0;
    color: #fff;
}

/* Light overlay for text readability */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 70, 140, 0.12);
}

/* Keep content above overlay */
.hero .container {
    position: relative;
    z-index: 1;
}

.hero h1 {
    max-width: 700px;
    color: #fff;
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 1.5rem;
}

.hero p {
    max-width: 650px;
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {

    .hero {
        min-height: 550px;
        padding: 90px 0;
    }

    .hero h1 {
        font-size: 2.2rem;
    }

    .hero p {
        font-size: 1rem;
    }

}

/* ==========================================================
   9. CARDS
========================================================== */

.card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

.card-body {
    padding: 2rem;
}


/* ----------------------------------------------------------
   Feature Cards
---------------------------------------------------------- */

.feature-card {
    height: 100%;
    padding: 2rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}


/* Feature Icons */
.feature-icon {
    width: 75px;
    height: 75px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 70, 140, 0.10);
    border-radius: 50%;
}

.feature-icon i {
    font-size: 2rem;
    color: var(--primary);
}


/* Feature Titles */
.feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 15px;
}


/* Feature Text */
.feature-card p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 0;
}


/* ==========================================================
   10. TABLES
========================================================== */

.table {
    background: var(--surface);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table thead {
    background: #f3f4f6;
}

.table th {
    color: var(--text);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.table td {
    color: var(--text-muted);
    vertical-align: middle;
}

.table tbody tr:hover {
    background: #f8fbff;
}


/* ==========================================================
   11. FORMS
========================================================== */

.form-control {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .75rem 1rem;
    box-shadow: none;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
}


/* ==========================================================
   12. SECTIONS
========================================================== */

section {
    padding: 90px 0;
}

section {
    padding: 90px 0;
}


/* Section Title Accent */

.section-title {
    position: relative;
}


.section-title::after {
    content: "";
    display: block;

    width: 80px;
    height: 3px;

    background: var(--primary);

    margin: 1rem auto 0;

    border-radius: 50px;
}

/* ==========================================================
   Why Choose Us
========================================================== */

.why-choose-us {
    background: var(--surface);
}

.why-choose-us .section-header {
    margin-bottom: 50px;
}

.why-choose-us .section-header h2 {
    margin-bottom: 15px;
}

.why-choose-us .section-header p {
    max-width: 700px;
    margin: 0 auto;
    color: #6c757d;
}


/* ==========================================================
   Services
========================================================== */

.services-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.services-content h2 {
    font-size: 2rem;
    margin-bottom: 1.25rem;
    color: #555;
}

.services-content p {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.service-list {
    list-style: none;
    padding: 0;
    margin-bottom: 2rem;
}

.service-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    color: #555;
}

.service-list i {
    color: #198754;
    font-size: 1.1rem;
}


/* ==========================================================
   About
========================================================== */

.about {
    background: #fff;
}

.about-content {
    max-width: 800px;
    margin: 0 auto;
}

.about-content h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: #555;
    margin-bottom: 1.5rem;
}

.about-content p {
    color: #6c757d;
    line-height: 1.8;
}


/* About Highlights */

.about-highlight {
    padding: 30px 20px;
}

.highlight-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 70, 140, 0.10);
    border-radius: 50%;
}

.highlight-icon i {
    font-size: 1.8rem;
    color: var(--primary);
}

.about-highlight h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 10px;
}

.about-highlight p {
    color: #6c757d;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ==========================================================
   About Intro
========================================================== */

.about-intro {
    background: #fff;
	padding: 0;
}


.about-intro-header {
    padding: 60px 0;
}


.about-intro-header p {
    max-width: 650px;
    margin: 0 auto;
    color: #6c757d;
    font-size: 1.15rem;
}


/* About Experience Split */

.about-experience {
    width: 100%;
    background: #f2f4f6;
}


.about-experience-inner {
    max-width: 600px;
}


.about-experience-image {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    border-radius: 0;
}


.about-experience-content {
    height: 460px;
    background: #f2f4f6;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.about-experience-content p {
    color: #6c757d;
    line-height: 1.8;
}


/* Mobile */

@media (max-width: 991px) {

    .about-experience-image {
        height: 300px;
    }


    .about-experience-content {
        height: auto;
        padding: 40px 25px;
    }

}

/* ==========================================================
   About Owner Mission
========================================================== */

.about-owner-missions {
    background: #fff;
}


.about-owner-mission-item {
    display: flex;
    align-items: flex-start;
    gap: 25px;
}


/* Owner Image */

.about-owner-image {
    flex-shrink: 0;
    width: 160px;
    height: 160px;
}


.about-owner-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    border: 6px solid #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
}


/* Mission Icon */

.about-owner-mission-icon {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 70, 140, 0.10);
    border-radius: 50%;
}


.about-owner-mission-icon i {
    font-size: 2rem;
    color: var(--primary);
}


.about-owner-mission-content h2 {
    font-size: 1.75rem;
    font-weight: 600;
    color: #555;
    margin-bottom: 1rem;
}


.about-owner-mission-content p {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 1rem;
}


.about-owner-mission-content p:last-child {
    margin-bottom: 0;
}


/* Mission Highlights */

.about-mission-highlights {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}


.about-mission-highlights li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #6c757d;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}


.about-mission-highlights i {
    color: #198754;
    font-size: 1rem;
}


/* Mobile */

@media (max-width: 991px) {

    .about-owner-mission-item {
        gap: 20px;
    }

    .about-owner-image {
        width: 100px;
        height: 100px;
    }

    .about-owner-mission-icon {
        width: 65px;
        height: 65px;
    }

    .about-owner-mission-icon i {
        font-size: 1.5rem;
    }

}

/* ==========================================================
   SERVICES PAGE
========================================================== */


/* Intro Header */

.services-intro-header {
    padding: 4rem 0 3rem;
}

.services-intro-header p {
    max-width: 750px;
    margin: 0 auto;
    color: #666;
    font-size: 1.1rem;
    line-height: 1.8;
}


/* Services Content */

.services-content {
    padding: 2rem 0 5rem;
}

.service-item {
    padding: 4rem 0;
}

.service-item:not(:last-child) {
    border-bottom: 1px solid #e9e9e9;
}


/* Service Images */

.service-image {
    max-width: 440px;
}

.service-image img {
    width: 100%;
    height: auto;
    display: block;
}


/* Service Text */

.service-text {
    padding: 1rem 2rem;
}


.service-text p {
    color: #666;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0;
    max-width: 900px;
}


/* Mobile Adjustments */

@media (max-width: 991px) {

    .services-intro-header {
        padding: 3rem 0 2rem;
    }

    .services-content {
        padding-bottom: 3rem;
    }

    .service-item {
        padding: 2.5rem 0;
    }

    .service-text {
        padding: 2rem 0 0;
    }

    .service-text h2 {
        font-size: 1.5rem;
    }

    .service-text p {
        font-size: 1rem;
    }

}

/* ==========================================================
   Pricing Intro
========================================================== */

.pricing-intro {
    background: #fff;
}

.pricing-intro-content {
    max-width: 760px;
    margin: 0 auto;
}

.pricing-intro h1 {
    margin-bottom: 25px;
}

.pricing-intro p {
    margin-bottom: 20px;
}

.pricing-intro p:last-child {
    margin-bottom: 0;
}

.pricing-service-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
}

.pricing-service-card h3 {
    color: var(--heading);
    font-size: 1.4rem;
    margin-bottom: .5rem;
}

.pricing-service-subtitle {
    color: var(--text-muted);
    font-size: .95rem;
}

.pricing-service-price {
    margin: 1.5rem 0;
}

.pricing-service-price span {
    display: block;
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 700;
}

.pricing-service-price small {
    color: var(--text-muted);
}

/* ==========================================================
   PRICING SERVICES
========================================================== */


/* Pricing Card */

.pricing-service-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
    transition: var(--transition);
}



/* Pricing Card Hover */

.pricing-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}



/* Featured Pricing Card */

.pricing-service-card.featured {
    position: relative;
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
}


/* Featured Card Hover */

.pricing-service-card.featured:hover {
    transform: translateY(-7px);
}


/* Featured Badge */

.pricing-featured-badge {
    position: absolute;
    top: .75rem;
    right: .75rem;

    background: var(--primary);
    color: #ffffff;

    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .05em;

    padding: .3rem .65rem;
    border-radius: 50px;
}



/* Card Title */

.pricing-service-card h3 {
    color: var(--heading);
    font-size: 1.4rem;
    margin-bottom: .5rem;
}


/* Card Subtitle */

.pricing-service-subtitle {
    color: var(--text-muted);
    font-size: .95rem;
}


/* Pricing Amount */

.pricing-service-price {
    margin: 1.5rem 0;
}


.pricing-service-price span {
    display: block;
    color: var(--primary);
    font-size: 2.5rem;
    font-weight: 700;
}


.pricing-service-price small {
    color: var(--text-muted);
}


/* ==========================================================
   PRICING MINIMUM NOTICE
========================================================== */


/* Minimum Charge Notice */

.pricing-minimum-notice {
    background: #e8eef7;
    border-radius: var(--radius);
    padding: 1.5rem 2rem;
    margin-top: 3rem;
}


/* Notice Title */

.pricing-minimum-notice h3 {
    color: var(--heading);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5rem;
}


/* Notice Text */

.pricing-minimum-notice p {
    margin-bottom: 0;
}


/* Highlight Amount */

.pricing-minimum-notice strong {
    color: var(--primary);
    font-weight: 700;
}

/* ==========================================================
   PRICING MAINTENANCE
========================================================== */


/* Maintenance Pricing Card */

.pricing-maintenance-card {
    background: #f0fdf4;
    border: 1px solid #dcfce7;
    border-radius: var(--radius);
    padding: 2rem;
    height: 100%;
}


/* Card Title */

.pricing-maintenance-card h3 {
    color: var(--heading);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
}


/* Pricing Amount */

.pricing-maintenance-price {
    margin: 1.5rem 0;
}


.pricing-maintenance-price span {
    display: block;
    color: var(--success);
    font-size: 2.5rem;
    font-weight: 700;
}


.pricing-maintenance-price small {
    color: var(--text-muted);
}



/* Benefits Section */

.pricing-maintenance-benefits {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    margin-top: 3rem;
}


.pricing-maintenance-benefits h3 {
    color: var(--heading);
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}



/* Benefits List */

.pricing-benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
}


.pricing-benefit-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    color: var(--text-muted);
    margin-bottom: .75rem;
    line-height: 1.6;
}


/* Benefit Content */

.pricing-benefit-content {
    flex: 1;
}


/* Benefit Sub Text */

.pricing-benefit-subtext {
    display: block;
    margin-top: .25rem;
    margin-left: 1.5rem;
    color: var(--text-muted);
    font-size: .95rem;
}


/* Benefits Header */

.pricing-maintenance-benefits-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1.5rem;
}


/* Benefits Icon */

.pricing-maintenance-benefits-icon i {
    color: var(--success);
    font-size: 1.8rem;
}


/* Benefits Title */

.pricing-maintenance-benefits-header h3 {
    margin-bottom: 0;
}

/* Check Icon */

.pricing-benefit-list i {
    color: #198754;
    font-size: .95rem;
    margin-top: .35rem;
    flex-shrink: 0;
}


/* Additional Note */

.pricing-maintenance-note {
    margin-top: 1.5rem;
}


.pricing-maintenance-note p {
    margin-bottom: 0;
}


/* ==========================================================
   PRICING TIME WINDOW ADJUSTMENTS
========================================================== */


/* Adjustment Container */

.pricing-adjustment-table {
    max-width: 900px;
    margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}


/* Adjustment Row */

.pricing-adjustment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border);
}


.pricing-adjustment-row:last-child {
    border-bottom: none;
}


/* Adjustment Information */

.pricing-adjustment-info h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .25rem;
}

.pricing-adjustment-info p {
    color: var(--text-muted);
    margin-bottom: 0;
}


/* Adjustment Rate Badge */

.pricing-adjustment-rate {
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    border-radius: 50px;
    white-space: nowrap;
}


/* Standard Rate */

.pricing-adjustment-rate.standard {
    background: #f3f4f6;
    color: var(--text);
}


/* Holiday Rate */

.pricing-adjustment-rate.holiday {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fde68a;
}


/* Mobile */

@media (max-width: 576px) {

    .pricing-adjustment-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }


    .pricing-adjustment-rate {
        align-self: flex-start;
    }

}


/* ==========================================================
   PRICING CLEANING FACTORS
========================================================== */


/* Factor Card */

.pricing-factor-card {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.75rem;
    height: 100%;
}


/* Factor Icon */

.pricing-factor-icon {
    flex-shrink: 0;
}


.pricing-factor-icon i {
    color: var(--primary);
    font-size: 1.75rem;
}



/* Factor Content */

.pricing-factor-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: .5rem;
}


.pricing-factor-content p {
    margin-bottom: 0;
}



/* Pricing Assurance Notice */

.pricing-factor-notice {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--radius);
    padding: 1.75rem;
    height: 100%;
}


.pricing-factor-notice-icon {
    flex-shrink: 0;
}


.pricing-factor-notice-icon i {
    color: var(--primary);
    font-size: 1.75rem;
}


.pricing-factor-notice h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--heading);
    margin-bottom: .5rem;
}


.pricing-factor-notice p {
    margin-bottom: 0;
}



/* Mobile */

@media (max-width: 576px) {

    .pricing-factor-card,
    .pricing-factor-notice {
        flex-direction: column;
        gap: .75rem;
    }

}

/* ==========================================================
   PRICING CTA
========================================================== */


/* CTA Container */

.pricing-cta-box {
    background: #eff6ff;
    border: 1px solid #dbeafe;
    border-radius: var(--radius-lg);
    padding: 3.5rem 2rem;
    text-align: center;
}


/* CTA Heading */

.pricing-cta-box h2 {
    color: var(--heading);
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 600;
    margin-bottom: 1rem;
}


/* CTA Description */

.pricing-cta-box p {
    max-width: 650px;
    margin: 0 auto 2rem;
    color: var(--text-muted);
}



/* CTA Button */

.pricing-cta-box .btn {
    background: var(--primary);
    color: #ffffff;
    border: none;
    padding: .85rem 2rem;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
}


.pricing-cta-box .btn:hover {
    background: var(--primary-hover);
}


/* ==========================================================
   CONTACT INTRO
========================================================== */


.contact-intro {
    background: #fff;
}


.contact-intro-content {
    max-width: 760px;
    margin: 0 auto;
}


.contact-intro h1 {
    margin-bottom: 25px;
}


.contact-intro p {
    color: #666;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 0;
}

/* ==========================================================
   CONTACT METHODS
========================================================== */


/* Contact Card */

.contact-method-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem 2rem;
    height: 100%;
    transition: var(--transition);
}


.contact-method-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}



/* Icon */

.contact-method-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.25rem;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 70, 140, 0.10);
    border-radius: 50%;
}


.contact-method-icon i {
    color: var(--primary);
    font-size: 1.8rem;
}



/* Title */

.contact-method-card h3 {
    color: var(--heading);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: .75rem;
}



/* Description */

.contact-method-card p {
    color: var(--text-muted);
    line-height: 1.7;
    margin-bottom: 1rem;
}



/* Link */

.contact-method-card a,
.contact-method-card span {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

.contact-method-card:first-child a {
    font-size: 1.2rem;
}

/* ==========================================================
   CONTACT FORM
========================================================== */


/* Form Wrapper */

.contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
}


/* Section Header */

.contact-form .section-header {
    margin-bottom: 2.5rem;
}


/* Fluent Forms Container */

.contact-form .fluentform {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
}


/* Form Labels */

.contact-form .ff-el-form-label {
    color: var(--heading);
    font-weight: 600;
    margin-bottom: .5rem;
}


/* Text Inputs */

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .85rem 1rem;
    color: var(--text);
    background: #ffffff;
    transition: var(--transition);
}


/* Focus State */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 70, 140, .12);
    outline: none;
}


/* Textarea */

.contact-form textarea {
    min-height: 160px;
    resize: vertical;
}


/* Submit Button */

.contact-form .ff-btn-submit {
    background: var(--primary);
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: .85rem 2rem;
    font-weight: 600;
    transition: var(--transition);
}


.contact-form .ff-btn-submit:hover {
    background: var(--primary-hover);
}


/* Mobile */

@media (max-width: 576px) {

    .contact-form .fluentform {
        padding: 2rem 1.5rem;
    }

}

/* ==========================================================
   Service Areas Intro
========================================================== */

.service-areas-intro {
    padding: 80px 0;
}

.service-areas-intro h1 {
    margin-bottom: 25px;
}

.service-areas-intro p {
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================
   Service Areas Grid
========================================================== */

.service-areas-grid {
    padding: 80px 0;
    background: #f7f9fc;
}


.service-areas-grid .section-title {
    margin-bottom: 20px;
}


.service-areas-grid .service-area-card {
    height: 100%;
    padding: 35px 30px;

    background: #fff;

    border-radius: 12px;
    border: 1px solid #e8edf3;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.service-areas-grid .service-area-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}


.service-areas-grid .service-area-card h3 {
    margin-bottom: 15px;

    font-size: 1.4rem;
}


.service-areas-grid .service-area-card p {
    margin-bottom: 25px;

    color: #555;
}

/* Service Area Link */

.service-areas-grid .service-area-card > a {
    display: inline-flex;
    align-items: center;

    font-weight: 500;

    text-decoration: none !important;

    color: #0066cc !important;
}


.service-areas-grid .service-area-card > a:visited {
    color: #0066cc !important;
}


.service-areas-grid .service-area-card > a:hover,
.service-areas-grid .service-area-card > a:focus {
    color: #0056b3 !important;
}


.service-areas-grid .service-area-card > a i {
    margin-left: 6px;

    transition: transform 0.2s ease;
}


.service-areas-grid .service-area-card > a:hover i {
    transform: translateX(4px);
}


/* ==========================================================
   Service Area (Custom Post) Why Choose
========================================================== */

.service-area-why-choose {
    padding: 80px 0;
}


.service-area-why-choose .why-choose-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
}


.service-area-why-choose .why-choose-list {
    padding-left: 20px;
    margin-top: 25px;
}


.service-area-why-choose .why-choose-list li {
    margin-bottom: 12px;
}

/* ==========================================================
   Service Area Facilities
========================================================== */

.service-area-facilities {
    padding: 80px 0;
    background: #fff;
}


.service-area-facilities .section-title {
    margin-bottom: 20px;
}


/* Facility Items */

.service-area-facilities .facility-item {
    height: 100%;
    text-align: center;
    padding: 30px 25px;
    transition: transform 0.3s ease;
}


.service-area-facilities .facility-item:hover {
    transform: translateY(-5px);
}


/* Icons */

.service-area-facilities .facility-item i {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 70px;
    height: 70px;

    margin-bottom: 20px;

    font-size: 2rem;
    color: #444;

    background: rgba(0, 123, 255, 0.08);
    border-radius: 50%;
}


/* Headings */

.service-area-facilities .facility-item h3 {
    margin-bottom: 12px;
    font-size: 1.25rem;
	font-weight: 600;
}


/* Description */

.service-area-facilities .facility-item p {
    margin-bottom: 0;
    color: #555;
    line-height: 1.7;
}

/* ==========================================================
   Service Area Process
========================================================== */

.service-area-process {
    padding: 80px 0;
    background: #f7f9fc;
}


.service-area-process .section-title {
    margin-bottom: 20px;
}


/* Process Step */

.service-area-process .process-step {
    text-align: center;
    padding: 25px;
}


/* Process Image */

.service-area-process .process-image {
    width: 100%;
    height: 220px;

    object-fit: cover;

    margin-bottom: 20px;

    background: #fff;
    border-radius: 12px;
}


/* Process Heading */

.service-area-process .process-step h3 {
    margin-bottom: 12px;

    font-size: 1.25rem;
    font-weight: 600;
}


/* Process Description */

.service-area-process .process-step p {
    margin-bottom: 0;

    color: #555;
    line-height: 1.7;
}

/* ==========================================================
   Service Area Local
========================================================== */

.service-area-local {
    padding: 80px 0;
    background: #fff;
}


.service-area-local .section-title {
    margin-bottom: 20px;
}


.service-area-local p {
    color: #555;
    line-height: 1.8;
}


/* Nearby Areas */

.service-area-local .nearby-areas-box {
    padding: 35px 30px;

    background: #f7f9fc;
    border-radius: 12px;

    transform: translateY(20px);
}


.service-area-local .nearby-areas-box h3 {
    margin-bottom: 20px;

    font-size: 1.15rem;
    font-weight: 500;
}


.service-area-local .nearby-areas-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.service-area-local .nearby-areas-box li {
    position: relative;

    margin-bottom: 10px;
    padding-left: 20px;

    color: #555;
}


.service-area-local .nearby-areas-box li::before {
    content: "•";

    position: absolute;
    left: 0;

    color: var(--primary-color);
}

/* ==========================================================
   Service Area CTA
========================================================== */

.service-area-cta {
    padding: 80px 0;
    background: var(--primary-color);
    color: #fff;
}


.service-area-cta h2 {
    margin-bottom: 20px;

    font-size: 2rem;
    font-weight: 600;
}


.service-area-cta p {
    margin-bottom: 30px;

    color: rgba(255,255,255,0.9);
    line-height: 1.7;
}


.service-area-cta .btn {
    padding: 12px 30px;

    font-weight: 600;

    border-radius: 8px;
}


/* ==========================================================
   13. Default Page Template
========================================================== */


.default-page {
    padding: 80px 0;
}


.page-content {
    background: #fff;

    padding: 50px;

    border-radius: 12px;

    border: 1px solid #e8edf3;

    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}


.page-title {
    margin-bottom: 35px;

    font-size: 2.2rem;

    font-weight: 600;

    color: var(--heading-color);
}


.page-body {
    color: #555;

    line-height: 1.8;
}


.page-body h2 {
    margin-top: 35px;

    margin-bottom: 15px;

    font-size: 1.5rem;

    font-weight: 600;
}


.page-body h3 {
    margin-top: 25px;

    margin-bottom: 12px;

    font-size: 1.25rem;

    font-weight: 600;
}


.page-body p {
    margin-bottom: 18px;
}


.page-body ul,
.page-body ol {
    margin-bottom: 20px;

    padding-left: 25px;
}


/* ==========================================================
   14. FOOTER
========================================================== */


/* Footer */

footer {
    background: linear-gradient(
        180deg,
        #fafaf9 0%,
        #eceae7 100%
    );
    border-top: 1px solid #e7e5e4;
    padding: 60px 0 25px;
    color: var(--text-muted);
}


/* Footer Main */

.footer-main {
    max-width: 1100px;
    margin: 0 auto 40px;
}

.footer-main .col-md-4 {
    padding-left: 25px;
    padding-right: 25px;
}

/* Footer Headings */

.footer h3 {
    color: var(--heading);
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}



/* Footer Menu */

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}


.footer-menu li {
    margin-bottom: .75rem;
}


.footer-menu li a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}


.footer-menu li a:hover {
    color: var(--primary);
}



/* Footer Contact */

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}


.footer-contact li {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .75rem;
    color: var(--text-muted);
}


.footer-contact i {
    color: var(--primary);
    width: 18px;
}


.footer-contact a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}


.footer-contact a:hover {
    color: var(--primary);
}



/* Footer Bottom */

.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    font-size: .9rem;
    color: var(--text-muted);
}


.footer-bottom a {
    color: var(--text-muted);
    text-decoration: none;
    transition: var(--transition);
}


.footer-bottom a:hover {
    color: var(--primary);
}



/* Mobile */

@media (max-width: 767px) {

    .footer-main {
        max-width: 100%;
    }


    .footer-main > div {
        margin-bottom: 2rem;
        text-align: center;
    }


    .footer-contact li {
        justify-content: center;
    }

}


/* ==========================================================
   15. UTILITY CLASSES
========================================================== */

.rounded {
    border-radius: var(--radius) !important;
}

.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}

.shadow-md {
    box-shadow: var(--shadow-md) !important;
}

.bg-surface {
    background: var(--surface);
}

.text-muted {
    color: var(--text-muted) !important;
}