/* Blueprint Comfort Systems - Fully Tagged CSS File */
/* SEPT 1, 2025 OPTIMIZED: Complete styling system with detailed documentation */
/* This CSS file contains all visual styling for the Blueprint Comfort Systems website */

/* === BASE STYLES === */
/* Global body styling - Sets foundation for entire website */
body {
    font-family: 'Open Sans', sans-serif; /* Primary font family - professional and readable */
    margin: 0; /* Remove default browser margins */
    padding: 0; /* Remove default browser padding */
    line-height: 1.6; /* Improves text readability */
    color: #333; /* Dark gray text color for good contrast */
    background-color: #f8f9fa; /* Light gray background - professional appearance */
}

/* Container class - Centers content and sets maximum width */
.container {
    max-width: 1200px; /* Optimal reading width for desktop screens */
    margin: 0 auto; /* Centers container horizontally */
    padding: 20px; /* Internal spacing around content */
}

/* === HEADER SECTION STYLES === */
/* Main header styling - Company branding and navigation area */
header {
    background: #2c5aa0; /* Primary blue brand color */
    color: white; /* White text for contrast against blue background */
    padding: 1.5rem 0; /* Vertical padding for breathing room */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

/* Header content layout - Flexbox for logo and contact info alignment */
.header-content {
    display: flex; /* Flexbox layout for responsive alignment */
    justify-content: space-between; /* Spreads items to opposite ends */
    align-items: center; /* Vertical center alignment */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

/* Logo section styling - Contains logo image and company name */
.logo-section {
    display: flex; /* Horizontal alignment of logo and text */
    align-items: center; /* Vertical center alignment */
}

/* Company logo image styling */
.logo-section img {
    height: 160px; /* Fixed height for consistent branding */
    max-width: 280px; /* Maximum width to prevent oversizing */
    margin-right: 20px; /* Space between logo and text */
    object-fit: contain; /* Maintains aspect ratio */
}

/* Main heading (H1) styling - Primary SEO element */
h1 {
    margin: 0; /* Removes default margins */
    font-size: 2.8rem; /* Large, prominent heading size */
    font-family: 'Lato', sans-serif; /* Bold display font for headers */
    line-height: 1.1; /* Tight line spacing for headlines */
}

/* Company tagline styling - Supporting brand message */
.tagline {
    font-size: 1.4rem; /* Readable but smaller than main heading */
    margin: 8px 0 0; /* Top margin for spacing from H1 */
}

/* Contact information section - Phone, email, CTA button */
.contact-info {
    text-align: right; /* Right-aligned on desktop */
    padding-top: 10px; /* Spacing from top */
    display: flex; /* Flexbox for vertical stacking */
    flex-direction: column; /* Vertical layout */
    align-items: flex-end; /* Right alignment of items */
    gap: 5px; /* Space between contact elements */
}

/* Primary phone number styling - Click-to-call functionality */
.phone {
    font-size: 1.4rem; /* Large, prominent size for visibility */
    font-weight: bold; /* Bold weight for emphasis */
    color: #ffffff; /* White text color */
    text-decoration: none; /* Removes underline from link */
    display: block; /* Block display for proper spacing */
}

/* Phone number hover effect */
.phone:hover {
    color: #f0f0f0; /* Slightly dimmed white on hover */
}

/* Email link styling */
.email-link {
    font-size: 1.1rem; /* Readable size, smaller than phone */
    color: #ffffff; /* White text color */
    text-decoration: none; /* No underline */
    display: block; /* Block display for spacing */
}

/* Email link hover effect */
.email-link:hover {
    color: #f0f0f0; /* Subtle hover color change */
}

/* Header CTA button specific styling */
.contact-info .btn {
    padding: 10px 25px; /* Smaller padding for header button */
    font-size: 1rem; /* Standard button text size */
    margin: 0; /* No additional margins needed */
}

/* === NAVIGATION STYLES === */
/* Main navigation container */
nav {
    width: 100%; /* Full width of header */
    margin-top: 15px; /* Space above navigation */
    padding-top: 15px; /* Internal top padding */
    border-top: 1px solid rgba(255,255,255,0.2); /* Subtle top border */
}

/* Navigation list styling - Removes default list styling */
nav ul {
    list-style: none; /* Removes bullet points */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margins */
    display: flex; /* Horizontal flexbox layout */
    justify-content: center; /* Centers navigation items */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 12px; /* Space between navigation items */
}

/* Individual navigation list items */
nav ul li {
    margin: 0; /* No additional margins needed */
}

/* Navigation link styling - Pill-shaped buttons */
nav ul li a {
    color: white; /* White text color */
    text-decoration: none; /* No underlines */
    font-size: 1rem; /* Standard readable size */
    font-weight: 600; /* Semi-bold for emphasis */
    padding: 12px 24px; /* Internal padding for button shape */
    border-radius: 25px; /* Rounded corners for pill shape */
    background-color: rgba(255, 255, 255, 0.1); /* Semi-transparent background */
    border: 2px solid rgba(255, 255, 255, 0.2); /* Subtle border */
    transition: all 0.3s ease; /* Smooth hover transitions */
    display: inline-block; /* Inline-block for padding to work */
    min-width: 100px; /* Minimum width for consistency */
    text-align: center; /* Center text within buttons */
}

/* Navigation link hover effects */
nav ul li a:hover {
    background-color: #ff6b35; /* Orange hover background */
    border-color: #ff6b35; /* Orange border on hover */
    transform: translateY(-2px); /* Subtle upward movement */
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); /* Orange glow effect */
}

/* Active page navigation link styling */
nav ul li a.active {
    background-color: #ff6b35; /* Orange background for current page */
    border-color: #ff6b35; /* Orange border */
    box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3); /* Consistent glow */
}

/* === HERO SECTION STYLES === */
/* Main hero banner - Primary landing area with background image */
.hero {
    background-image: url('Images/hvac-pro22.jpg'); /* Hero background image */
    background-size: cover; /* Covers entire section */
    background-position: center 30%; /* Positions image for best view */
    background-repeat: no-repeat; /* Prevents image repetition */
    background-attachment: scroll; /* Scrolls with page for mobile compatibility */
    min-height: 450px; /* Minimum height for impact */
    padding: 3rem 0; /* Vertical padding for content breathing room */
    text-align: center; /* Center-aligned text */
    position: relative; /* Enables overlay positioning */
    overflow: hidden; /* Prevents content overflow */
    z-index: 1; /* Stacking context for overlay */
}

/* Hero overlay - Semi-transparent white layer over background image */
.hero::before {
    content: ''; /* Required for pseudo-element */
    position: absolute; /* Absolute positioning to cover entire hero */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.85); /* Semi-transparent white overlay */
    z-index: -1; /* Behind hero content */
}

/* Hero main headline styling */
.hero h2 {
    font-size: 3rem; /* Large, impactful headline size */
    margin-bottom: 1.5rem; /* Space below headline */
    color: #2c5aa0; /* Primary blue brand color */
    line-height: 1.2; /* Tight line spacing for headlines */
}

/* Hero description paragraph */
.hero p {
    font-size: 1.3rem; /* Larger than body text for readability */
    max-width: 900px; /* Constrains width for optimal reading */
    margin: 0 auto 2rem; /* Centers text and adds bottom margin */
}

/* === MAIN CONTENT SECTIONS === */
/* Shared styling for main content sections */
.services, .why-us, .testimonials, .faq {
    padding: 3rem 0; /* Consistent vertical padding for all sections */
}

/* Section heading styling - Applies to H2 elements in main sections */
.services h2, .why-us h2, .testimonials h2, .faq h2 {
    text-align: center; /* Center-aligned headings */
    color: #2c5aa0; /* Primary blue brand color */
    font-size: 2.2rem; /* Large section heading size */
    margin-bottom: 2.5rem; /* Space below headings */
}

/* === SERVICE GRID LAYOUT === */
/* Main grid layout for service cards and benefit cards */
.service-grid {
    display: grid; /* CSS Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2.5rem; /* Space between grid items */
    margin-top: 2rem; /* Space above grid */
}

/* Individual service/benefit card styling */
.service-card {
    background: white; /* White background for cards */
    padding: 2rem; /* Internal padding */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08); /* Subtle shadow for depth */
    text-align: center; /* Center-aligned content */
    transition: transform 0.3s ease; /* Smooth hover animation */
}

/* Service card hover effect - Subtle lift animation */
.service-card:hover {
    transform: translateY(-5px); /* Moves card up slightly on hover */
}

/* Service card heading styling */
.service-card h3 {
    color: #2c5aa0; /* Primary blue for headings */
    margin-top: 1rem; /* Space above heading */
    font-size: 1.6rem; /* Prominent heading size */
}

/* Service card icon styling - Font Awesome icons */
.service-card .icon {
    font-size: 3.5rem; /* Large icon size for visual impact */
    color: #ff6b35; /* Orange accent color for icons */
    margin-bottom: 15px; /* Space below icons */
}

/* === BUTTON STYLES === */
/* Primary button styling - Call-to-action buttons */
.btn {
    display: inline-block; /* Inline-block for proper padding */
    background: #ff6b35; /* Orange brand color background */
    color: white; /* White text */
    padding: 15px 40px; /* Internal padding for button size */
    text-decoration: none; /* Removes underline from links */
    border-radius: 8px; /* Rounded corners */
    font-weight: bold; /* Bold text for emphasis */
    font-size: 1.1rem; /* Slightly larger text */
    margin: 0.5rem; /* External margins */
    transition: background 0.3s ease; /* Smooth color transition */
}

/* Primary button hover effect */
.btn:hover {
    background: #e55a2b; /* Darker orange on hover */
}

/* === CTA SECTION STYLES === */
/* Call-to-action section - Final conversion area */
.cta {
    background: #2c5aa0; /* Primary blue background */
    color: white; /* White text for contrast */
    padding: 3rem 0; /* Vertical padding */
    text-align: center; /* Center-aligned content */
    background-size: cover; /* Covers full section if background image used */
}

/* CTA section main heading */
.cta h2 {
    font-size: 2.8rem; /* Large, prominent heading */
    margin-bottom: 1rem; /* Space below heading */
}

/* CTA section paragraph text */
.cta p {
    font-size: 1.2rem; /* Larger text for readability */
    margin-bottom: 1.5rem; /* Space below paragraphs */
}

/* CTA section primary button */
.cta .btn {
    background: #ff6b35; /* Orange background maintains brand consistency */
}

/* CTA section secondary button - Targets the "Email Us" button */
.cta .btn:nth-of-type(2) {
    background: #fff; /* White background */
    color: #2c5aa0; /* Blue text */
}

/* Secondary button hover effect */
.cta .btn:nth-of-type(2):hover {
    background: #f0f0f0; /* Light gray on hover */
    color: #2c5aa0; /* Maintains blue text */
}

/* === FOOTER STYLES === */
/* Website footer - Copyright and contact information */
footer {
    background: #222; /* Dark background */
    color: white; /* White text */
    text-align: center; /* Center-aligned content */
    padding: 1.5rem 0; /* Vertical padding */
    font-size: 0.9rem; /* Smaller text size */
}

/* Footer paragraph styling */
footer p {
    margin: 5px 0; /* Minimal margins */
}

/* Footer link styling */
footer a {
    color: white; /* White links */
    text-decoration: none; /* No underlines */
}

/* === TESTIMONIALS SECTION === */
/* Testimonial grid layout */
.testimonial-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between testimonial cards */
}

/* Individual testimonial card styling */
.testimonial-card {
    background: #ffffff; /* White background */
    padding: 1.5rem; /* Internal padding */
    border-left: 5px solid #2c5aa0; /* Blue accent border on left */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow */
}

/* Testimonial quote text */
.testimonial-card p {
    font-style: italic; /* Italic text for quotes */
    margin-bottom: 10px; /* Space below quote */
}

/* Testimonial author attribution */
.testimonial-card .author {
    font-weight: bold; /* Bold text for author names */
    text-align: right; /* Right-aligned attribution */
    color: #555; /* Gray color for author names */
}

/* === FAQ SECTION STYLES === */
/* Individual FAQ item container */
.faq-item {
    background: #ffffff; /* White background */
    border: 1px solid #ddd; /* Light gray border */
    border-radius: 8px; /* Rounded corners */
    margin-bottom: 15px; /* Space between FAQ items */
    overflow: hidden; /* Prevents content overflow during animations */
}

/* FAQ question styling - Clickable area */
.faq-question {
    padding: 18px 20px; /* Internal padding */
    font-weight: bold; /* Bold text for questions */
    cursor: pointer; /* Pointer cursor indicates clickability */
    display: flex; /* Flexbox for question and icon layout */
    justify-content: space-between; /* Spreads content to edges */
    align-items: center; /* Vertical center alignment */
    background-color: #f0f0f0; /* Light gray background */
    color: #2c5aa0; /* Blue text color */
}

/* FAQ question expand/collapse icon */
.faq-question::after {
    content: '+'; /* Plus symbol for collapsed state */
    font-size: 1.5rem; /* Large icon size */
    transition: transform 0.3s ease; /* Smooth rotation animation */
}

/* Active FAQ question icon - Rotates plus to X */
.faq-question.active::after {
    transform: rotate(45deg); /* Rotates plus 45 degrees to create X */
}

/* FAQ answer container - Hidden by default */
.faq-answer {
    padding: 0 20px; /* Horizontal padding matches question */
    max-height: 0; /* Hidden state - no height */
    overflow: hidden; /* Prevents content from showing when collapsed */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Smooth expand/collapse */
    background-color: #fff; /* White background */
}

/* FAQ answer text styling */
.faq-answer p {
    padding-bottom: 18px; /* Bottom padding for spacing */
    margin-top: 0; /* No top margin needed */
}

/* FAQ answer open state - Reveals content */
.faq-answer.open {
    max-height: 200px; /* Expands to show content */
    padding-top: 10px; /* Adds top padding when open */
    padding-bottom: 18px; /* Maintains bottom padding */
}

/* === CONTACT FORM STYLES === */
/* Contact form section wrapper */
.contact-form-section {
    padding: 3rem 0; /* Vertical section padding */
    background: #f4f4f4; /* Light gray section background */
}

/* Contact form section heading */
.contact-form-section h2 {
    text-align: center; /* Center-aligned heading */
    color: #2c5aa0; /* Blue brand color */
    margin-bottom: 2rem; /* Space below heading */
}

/* Contact form container */
.contact-form {
    max-width: 600px; /* Constrains form width for optimal layout */
    margin: 0 auto; /* Centers form horizontally */
    padding: 2rem; /* Internal padding */
    background: white; /* White background */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Shadow for depth */
}

/* Form label styling */
.contact-form label {
    display: block; /* Block display for proper spacing */
    margin-bottom: 8px; /* Space below labels */
    font-weight: bold; /* Bold labels for emphasis */
    color: #555; /* Dark gray text */
}

/* Form input field styling - Applies to text, email, tel inputs, textarea, select */
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea,
.contact-form select {
    width: 100%; /* Full width of container */
    padding: 12px; /* Internal padding */
    margin-bottom: 20px; /* Space below fields */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1rem; /* Standard readable text size */
    box-sizing: border-box; /* Includes padding in width calculation */
}

/* Textarea specific styling */
.contact-form textarea {
    min-height: 120px; /* Minimum height for message areas */
    resize: vertical; /* Allows only vertical resizing */
}

/* Contact form submit button */
.contact-form button.btn {
    width: 100%; /* Full width button */
    border: none; /* Removes default border */
    cursor: pointer; /* Pointer cursor for interactivity */
}

/* === SERVICES PAGE SPECIFIC STYLES === */
/* Services page section wrapper */
.services-section {
    padding: 4rem 0; /* Extra padding for services page */
}

/* Detailed service card styling - Enhanced version for services page */
.service-detail {
    background: white; /* White background */
    padding: 2.5rem; /* Generous internal padding */
    border-radius: 15px; /* More rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Enhanced shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    display: block; /* Block display */
}

/* Service detail hover effect */
.service-detail:hover {
    transform: translateY(-8px); /* Larger upward movement */
    box-shadow: 0 12px 35px rgba(0,0,0,0.15); /* Enhanced shadow on hover */
}

/* Service detail icon styling */
.service-detail .icon {
    font-size: 4rem; /* Extra large icons */
    color: #ff6b35; /* Orange accent color */
    margin-bottom: 1.5rem; /* Space below icon */
    text-align: center; /* Center-aligned icons */
    display: block; /* Block display for centering */
}

/* Service detail heading */
.service-detail h3 {
    color: #2c5aa0; /* Blue brand color */
    font-size: 1.8rem; /* Large heading size */
    margin-bottom: 1rem; /* Space below heading */
    text-align: center; /* Center-aligned headings */
}

/* Service detail paragraph text */
.service-detail p {
    margin-bottom: 1rem; /* Space between paragraphs */
    text-align: left; /* Left-aligned body text */
    line-height: 1.6; /* Readable line spacing */
}

/* Service detail list styling */
.service-detail ul {
    margin: 1rem 0; /* Vertical margins */
    padding-left: 1.5rem; /* Left padding for bullets */
    text-align: left; /* Left-aligned lists */
}

/* Service detail list item styling */
.service-detail li {
    margin-bottom: 0.5rem; /* Space between list items */
    line-height: 1.5; /* Readable line spacing */
}

/* Service pricing box */
.service-price {
    background: #f8f9fa; /* Light gray background */
    padding: 1rem; /* Internal padding */
    border-radius: 8px; /* Rounded corners */
    margin-top: 1.5rem; /* Space above pricing */
    text-align: center; /* Center-aligned text */
    border-left: 4px solid #ff6b35; /* Orange accent border */
    font-weight: bold; /* Bold pricing text */
}

/* === PROCESS SECTION STYLES === */
/* Process section wrapper */
.process-section {
    background: #f8f9fa; /* Light gray background */
    padding: 4rem 0; /* Vertical padding */
}

/* Process steps grid layout */
.process-steps {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between steps */
    margin-top: 2rem; /* Space above grid */
}

/* Individual process step styling */
.process-step {
    text-align: center; /* Center-aligned content */
    padding: 2rem; /* Internal padding */
}

/* Process step number circle */
.step-number {
    background: #ff6b35; /* Orange background */
    color: white; /* White text */
    width: 60px; /* Fixed width */
    height: 60px; /* Fixed height for circle */
    border-radius: 50%; /* Creates circle shape */
    display: flex; /* Flexbox for centering */
    align-items: center; /* Vertical center */
    justify-content: center; /* Horizontal center */
    font-size: 1.5rem; /* Large number text */
    font-weight: bold; /* Bold numbers */
    margin: 0 auto 1rem; /* Centers circle and adds bottom margin */
}

/* === SECONDARY BUTTON STYLES === */
/* Secondary button styling - Alternative to primary orange buttons */
.btn-secondary {
    background: #fff; /* White background */
    color: #2c5aa0; /* Blue text */
}

/* Secondary button hover effect */
.btn-secondary:hover {
    background: #f0f0f0; /* Light gray on hover */
    color: #2c5aa0; /* Maintains blue text */
}

/* === ABOUT PAGE SPECIFIC STYLES === */
/* About page section wrapper */
.about-section {
    padding: 4rem 0; /* Vertical padding */
}

/* About section with gray background */
.about-section.gray {
    background: #f8f9fa; /* Light gray background */
}

/* About page two-column grid */
.about-grid {
    display: grid; /* Grid layout */
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 4rem; /* Large gap between columns */
    align-items: center; /* Vertical center alignment */
    margin-top: 2rem; /* Space above grid */
}

/* About page text content */
.about-text h2 {
    color: #2c5aa0; /* Blue brand color */
    font-size: 2.5rem; /* Large heading size */
    margin-bottom: 1.5rem; /* Space below heading */
}

/* About page paragraph text */
.about-text p {
    font-size: 1.1rem; /* Slightly larger body text */
    margin-bottom: 1.5rem; /* Space between paragraphs */
}

/* About page image container */
.about-image {
    text-align: center; /* Center-aligned images */
}

/* About page image styling */
.about-image img {
    max-width: 100%; /* Responsive image sizing */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Shadow for depth */
}

/* === STATS SECTION STYLES === */
/* Statistics section with blue background */
.stats-section {
    background: #2c5aa0; /* Blue brand background */
    color: white; /* White text */
    padding: 3rem 0; /* Vertical padding */
}

/* Stats grid layout */
.stats-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between stat items */
    text-align: center; /* Center-aligned content */
}

/* Individual stat item heading - Large numbers */
.stat-item h3 {
    font-size: 3rem; /* Very large text for impact */
    margin-bottom: 0.5rem; /* Space below number */
    color: #ff6b35; /* Orange accent color */
}

/* Stat item description text */
.stat-item p {
    font-size: 1.1rem; /* Readable text size */
    margin: 0; /* No additional margins */
}

/* === VALUES SECTION STYLES === */
/* Company values section wrapper */
.values-section {
    padding: 4rem 0; /* Vertical padding */
}

/* Values grid layout */
.values-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 2.5rem; /* Space between value cards */
    margin-top: 3rem; /* Space above grid */
}

/* Individual value card styling */
.value-card {
    background: white; /* White background */
    padding: 2.5rem; /* Internal padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Shadow for depth */
    text-align: center; /* Center-aligned content */
    transition: transform 0.3s ease; /* Hover animation */
}

/* Value card hover effect */
.value-card:hover {
    transform: translateY(-8px); /* Upward movement on hover */
}

/* Value card icon styling */
.value-card .icon {
    font-size: 4rem; /* Large icons */
    color: #ff6b35; /* Orange accent color */
    margin-bottom: 1.5rem; /* Space below icon */
}

/* Value card heading */
.value-card h3 {
    color: #2c5aa0; /* Blue brand color */
    font-size: 1.8rem; /* Large heading size */
    margin-bottom: 1rem; /* Space below heading */
}

/* Value card description text */
.value-card p {
    font-size: 1rem; /* Standard readable text */
}

/* === CONTACT PAGE SPECIFIC STYLES === */
/* Contact page section wrapper */
.contact-section {
    padding: 4rem 0; /* Vertical padding */
}

/* Contact section with gray background */
.contact-section.gray {
    background: #f8f9fa; /* Light gray background */
}

/* === CONTACT GRID LAYOUT === */
/* Contact information grid */
.contact-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Responsive columns */
    gap: 3rem; /* Space between contact cards */
    margin-top: 3rem; /* Space above grid */
}

/* Individual contact method card */
.contact-card {
    background: white; /* White background */
    padding: 3rem; /* Generous internal padding */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1); /* Shadow for depth */
    text-align: center; /* Center-aligned content */
    transition: transform 0.3s ease; /* Hover animation */
}

/* Contact card hover effect */
.contact-card:hover {
    transform: translateY(-8px); /* Upward movement on hover */
}

/* Contact card icon styling */
.contact-card .icon {
    font-size: 4rem; /* Large icons */
    color: #ff6b35; /* Orange accent color */
    margin-bottom: 2rem; /* Space below icon */
}

/* Contact card heading */
.contact-card h3 {
    color: #2c5aa0; /* Blue brand color */
    font-size: 2rem; /* Large heading size */
    margin-bottom: 1rem; /* Space below heading */
}

/* Contact card description text */
.contact-card p {
    font-size: 1.1rem; /* Readable text size */
    margin-bottom: 1.5rem; /* Space below text */
}

/* Contact card link styling */
.contact-card a {
    color: #2c5aa0; /* Blue brand color */
    text-decoration: none; /* No underlines */
    font-weight: bold; /* Bold text */
    font-size: 1.2rem; /* Larger text size */
    display: block; /* Block display for full width */
    text-align: center; /* Center-aligned */
}

/* Contact card link hover effect */
.contact-card a:hover {
    color: #ff6b35; /* Orange color on hover */
}

/* === HOURS SECTION STYLES === */
/* Business hours section with blue background */
.hours-section {
    background: #2c5aa0; /* Blue brand background */
    color: white; /* White text */
    padding: 3rem 0; /* Vertical padding */
    text-align: center; /* Center-aligned content */
}

/* Hours information grid */
.hours-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 2rem; /* Space between hour items */
    margin-top: 2rem; /* Space above grid */
}

/* Individual hours item styling */
.hours-item {
    background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */
    padding: 2rem; /* Internal padding */
    border-radius: 10px; /* Rounded corners */
}

/* Hours item heading */
.hours-item h4 {
    color: #ff6b35; /* Orange accent color */
    font-size: 1.3rem; /* Readable heading size */
    margin-bottom: 1rem; /* Space below heading */
}

/* Hours item text */
.hours-item p {
    margin: 0.5rem 0; /* Vertical margins */
}

/* === SERVICE AREA STYLES === */
/* Service area section wrapper */
.service-area {
    padding: 4rem 0; /* Vertical padding */
}

/* Service area grid layout */
.area-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Responsive columns */
    gap: 1.5rem; /* Space between area items */
    margin-top: 2rem; /* Space above grid */
}

/* Individual service area item */
.area-item {
    background: white; /* White background */
    padding: 1.5rem; /* Internal padding */
    border-radius: 10px; /* Rounded corners */
    text-align: center; /* Center-aligned content */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Subtle shadow */
    transition: transform 0.3s ease; /* Hover animation */
}

/* Service area item hover effect */
.area-item:hover {
    transform: translateY(-5px); /* Upward movement on hover */
}

/* Area item heading */
.area-item h4 {
    color: #2c5aa0; /* Blue brand color */
    margin-bottom: 0.5rem; /* Space below heading */
    font-size: 1.1rem; /* Readable heading size */
}

/* Area item description text */
.area-item p {
    margin: 0; /* No margins */
    font-size: 0.9rem; /* Smaller descriptive text */
    color: #666; /* Gray text color */
}

/* === EMERGENCY SECTION STYLES === */
/* Emergency services section with orange background */
.emergency-section {
    background: #ff6b35; /* Orange brand background */
    color: white; /* White text */
    padding: 3rem 0; /* Vertical padding */
    text-align: center; /* Center-aligned content */
}

/* Emergency section heading */
.emergency-section h2 {
    font-size: 2.5rem; /* Large, urgent heading size */
    margin-bottom: 1rem; /* Space below heading */
}

/* Emergency section description text */
.emergency-section p {
    font-size: 1.2rem; /* Readable text size */
    margin-bottom: 2rem; /* Space below text */
}

/* Emergency section CTA button */
.emergency-section .btn {
    background: white; /* White background for contrast */
    color: #ff6b35; /* Orange text */
    font-size: 1.3rem; /* Large button text */
    padding: 20px 50px; /* Extra padding for prominence */
}

/* Emergency section button hover effect */
.emergency-section .btn:hover {
    background: #f0f0f0; /* Light gray on hover */
}

/* === SEO ENHANCEMENT UTILITIES === */
/* Hidden content for SEO purposes - Screen reader accessible but visually hidden */
.hidden-seo {
    position: absolute; /* Absolute positioning */
    left: -9999px; /* Moves far off-screen */
    width: 1px; /* Minimal width */
    height: 1px; /* Minimal height */
    overflow: hidden; /* Prevents any visual appearance */
}

/* === RESPONSIVE DESIGN BREAKPOINTS === */
/* Mobile and tablet responsive adjustments - Applies to screens 768px and smaller */
@media (max-width: 768px) {
    
    /* === MOBILE HEADER ADJUSTMENTS === */
    /* Stacks header content vertically on mobile */
    .header-content {
        flex-direction: column; /* Vertical layout */
        text-align: center; /* Center-aligned content */
    }
    
    /* Mobile logo section adjustments */
    .logo-section {
        margin-bottom: 15px; /* Space below logo */
        flex-direction: column; /* Vertical logo layout */
        align-items: center; /* Center-aligned */
    }
    
    /* Mobile logo image sizing */
    .logo-section img {
        height: 140px; /* Smaller height for mobile */
        margin-right: 0; /* No right margin needed */
        margin-bottom: 10px; /* Bottom margin for spacing */
    }
    
    /* Mobile contact info adjustments */
    .contact-info {
        text-align: center; /* Center-aligned */
        padding-top: 15px; /* Top padding */
        width: 100%; /* Full width */
        align-items: center; /* Center-aligned items */
    }
    
    /* Mobile heading size adjustment */
    h1 {
        font-size: 2rem; /* Smaller heading for mobile screens */
    }
    
    /* Mobile tagline size adjustment */
    .tagline {
        font-size: 1.1rem; /* Smaller tagline text */
    }
    
    /* Mobile phone number size adjustment */
    .phone {
        font-size: 1.1rem; /* Smaller phone text */
    }
    
    /* Mobile email link size adjustment */
    .email-link {
        font-size: 0.95rem; /* Smaller email text */
    }
    
    /* Mobile header button adjustments */
    .contact-info .btn {
        font-size: 0.9rem; /* Smaller button text */
        padding: 10px 25px; /* Adjusted padding */
        margin-top: 0; /* No top margin */
    }
    
    /* === MOBILE NAVIGATION ADJUSTMENTS === */
    /* Mobile navigation spacing */
    nav ul {
        gap: 8px; /* Smaller gaps between nav items */
    }
    
    /* Mobile navigation link sizing */
    nav ul li a {
        font-size: 0.9rem; /* Smaller nav text */
        padding: 10px 20px; /* Reduced padding */
        min-width: 80px; /* Smaller minimum width */
    }
    
    /* === MOBILE HERO ADJUSTMENTS === */
    /* Mobile hero heading size */
    .hero h2 {
        font-size: 2rem; /* Smaller hero headline for mobile */
    }
    
    /* Mobile hero description size */
    .hero p {
        font-size: 1rem; /* Standard text size for mobile */
    }
    
    /* Mobile hero background positioning */
    .hero {
        background-position: 70% 30%; /* Adjusted positioning for mobile */
    }
    
    /* === MOBILE GRID ADJUSTMENTS === */
    /* Mobile service grid - Single column layout */
    .service-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    
    /* Mobile CTA heading size */
    .cta h2 {
        font-size: 2rem; /* Smaller CTA heading for mobile */
    }
    
    /* === MOBILE SERVICES PAGE ADJUSTMENTS === */
    /* Mobile service detail card padding */
    .service-detail {
        padding: 1.5rem; /* Reduced padding for mobile */
    }
    
    /* Mobile service detail heading size */
    .service-detail h3 {
        font-size: 1.5rem; /* Smaller heading for mobile */
    }
    
    /* Mobile services grid - Single column */
    div.services-grid {
        grid-template-columns: 1fr; /* Single column layout */
    }
    
    /* Mobile process steps - Single column */
    .process-steps {
        grid-template-columns: 1fr; /* Single column layout */
    }
    
    /* === MOBILE ABOUT PAGE ADJUSTMENTS === */
    /* Mobile about grid - Single column layout */
    .about-grid {
        grid-template-columns: 1fr; /* Single column */
        gap: 2rem; /* Reduced gap */
    }
    
    /* Mobile about heading size */
    .about-text h2 {
        font-size: 2rem; /* Smaller heading for mobile */
    }
    
    /* Mobile stats grid - Single column */
    .stats-grid {
        grid-template-columns: 1fr; /* Single column layout */
    }
    
    /* Mobile stat numbers size */
    .stat-item h3 {
        font-size: 2.5rem; /* Smaller stat numbers for mobile */
    }
    
    /* Mobile values grid - Single column */
    .values-grid {
        grid-template-columns: 1fr; /* Single column layout */
    }
    
    /* Mobile value card padding */
    .value-card {
        padding: 1.5rem; /* Reduced padding for mobile */
    }
    
    /* === MOBILE CONTACT PAGE ADJUSTMENTS === */
    /* Mobile contact grid - Single column */
    .contact-grid {
        grid-template-columns: 1fr; /* Single column layout */
        gap: 2rem; /* Reduced gap */
    }
    
    /* Mobile hours grid - Single column */
    .hours-grid {
        grid-template-columns: 1fr; /* Single column layout */
    }
    
    /* Mobile area grid - Two columns maximum */
    .area-grid {
        grid-template-columns: repeat(2, 1fr); /* Two columns max on mobile */
    }
    
    /* Mobile emergency section heading */
    .emergency-section h2 {
        font-size: 2rem; /* Smaller emergency heading for mobile */
    }
}

/* === SERVICES GRID OVERRIDE === */
/* Fixed Services Grid - More specific selector to ensure proper layout */
div.services-grid {
    display: grid; /* Grid layout */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* Responsive columns with larger minimum */
    gap: 3rem; /* Larger gap between service items */
    margin-top: 3rem; /* Space above services grid */
}