/* General Styles */

/* Make padding/border count inside an element’s width */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
    font-family: 'Poppins', Arial, sans-serif;
    background-color: #1a1a1a;
    color: #ffffff;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Highlight color */
.highlight {
    color: #4CAF50; /* Green for positive emphasis */
}
.main-headline .highlight {
    color: #FFD700; /* Gold for main headline emphasis */
}

/* NEW Lead Magnet Banner Styles */
.lead-magnet-banner {
    background-color: #FFD700; /* Gold, eye-catching */
    color: #1a1a1a; /* Dark text for contrast */
    text-align: center;
    padding: 12px 20px;
    font-size: 16px;
    /* border-bottom: 2px solid #E6B800; */ /* Optional darker border */
}
.lead-magnet-banner p {
    margin: 0;
}
.lead-magnet-banner strong {
    font-weight: 700; /* Matches Poppins bold */
}


/* Header / Hero Styles */
header#hero {
    text-align: center;
    background: linear-gradient(rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0.8)), url('https://via.placeholder.com/1920x1080.png?text=Clean+Garage+Background') no-repeat center center/cover; /* Replace with actual background image */
    padding: 60px 20px 80px; /* Increased bottom padding for hero content */
    position: relative; /* For potential overlays or absolute elements */
}

.logo {
    max-width: 200px;
    margin-bottom: 20px;
}

h1.main-headline {
    font-size: 42px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.3;
}

p.sub-headline {
    font-size: 20px;
    margin-bottom: 25px; /* Adjusted for new call button */
    color: #f0f0f0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* NEW Hero Call Button Container Styles */
.hero-call-button-container {
    text-align: center; /* Center the inline-block button */
    margin-bottom: 30px; /* Space before form/benefits */
}

/* Styles for the new hero call button itself (cta-button.phone-hero-main) are below with other .cta-button styles */


.hero-value-proposition {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: flex-start; /* Changed from center to flex-start for form alignment */
    justify-content: center;
    margin-top: 20px;
}

.hero-form-container {
    flex: 1 1 450px; /* Allow form to take significant space */
    background-color: rgba(42, 42, 42, 0.9); /* Slightly transparent dark background */
    padding: 30px;
    border-radius: 10px;
    text-align: left; /* Default to left for labels */
    box-shadow: 0 5px 25px rgba(0,0,0,0.4);
}
.hero-form-container h2 {
    font-size: 28px;
    margin-bottom: 10px;
    text-align: center;
    font-weight: 600;
}
.hero-form-container > p { /* Targeting direct child p for the subtitle */
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
}

#hero-quote-form .form-group {
    margin-bottom: 15px;
}
#hero-quote-form label {
    font-size: 14px;
    margin-bottom: 5px;
    font-weight: 600;
    display: block;
}
#hero-quote-form label span {
    color: #FF5722; /* Required field indicator */
}
#hero-quote-form input,
#hero-quote-form textarea {
    width: calc(100% - 22px); /* Account for padding */
    padding: 12px 10px;
    border-radius: 5px;
    border: 1px solid #555;
    font-size: 16px;
    background: #333;
    color: #fff;
}
#hero-quote-form input:focus,
#hero-quote-form textarea:focus {
    outline: 2px solid #FF5722;
    background: #444;
    border-color: #FF5722;
}
#hero-quote-form textarea {
    min-height: 80px;
    resize: vertical;
}
#hero-quote-form .cta-button {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    margin-top: 10px; /* Existing button, ensure it still looks good */
}

.form-assurance {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
}
.phone-link {
    color: #4CAF50;
    font-weight: bold;
    text-decoration: none;
}
.phone-link:hover {
    text-decoration: underline;
}

.hero-benefits {
    flex: 1 1 400px;
    text-align: left; /* Keep benefits text left-aligned for readability */
    padding-top: 20px;
}
.hero-benefits h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #FFD700;
    text-align: center; /* Center the h3 for benefits on desktop too */
}
.hero-benefits ul {
    list-style: none;
    padding: 0;
    margin: 0 auto; /* Center the UL if it has a max-width or is inline-block */
    display: table; /* Another way to center if it has no fixed width */
}
.hero-benefits ul li {
    font-size: 17px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
}
.hero-benefits ul li i {
    color: #4CAF50;
    margin-right: 10px;
    font-size: 20px;
}
.hero-social-proof {
    margin-top: 25px;
    font-size: 18px;
    font-weight: 600;
    padding: 15px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 8px;
    text-align: center;
}
.hero-social-proof .stars {
    color: #FFD700; /* Gold stars */
    font-size: 22px;
    margin-right: 5px;
}

.hero-trust-badges {
    margin-top: 40px; /* Space below hero content */
}


/* Original CSS from user starts here, with modifications and additions */
h1 { /* Overriding generic h1 for specific headline styling */
    font-size: 36px;
    margin-bottom: 10px; /* Adjusted */
    text-transform: uppercase;
    letter-spacing: 2px;
}

.cta-container {
    margin: 20px auto; /* Added auto for centering if it has a fixed width */
    text-align: center; /* Ensure buttons within are centered */
}

.cta-button {
    background-color: #FF5722;
    border: none;
    color: white !important; /* Ensure text is white */
    padding: 15px 32px;
    text-align: center;
    text-decoration: none !important; /* Ensure no underline */
    display: inline-block;
    font-size: 18px;
    margin: 10px 5px; /* Adjusted margin for inline-block spacing */
    cursor: pointer;
    border-radius: 50px;
    transition: background-color 0.3s, transform 0.3s;
    font-weight: 600;
}

.cta-button:hover {
    background-color: #E64A19;
    transform: scale(1.05);
}

.cta-button.primary-cta { /* Main Call to Action */
    background-color: #FF5722; /* Orange for primary action */
    font-size: 20px;
    padding: 18px 35px;
}
.cta-button.primary-cta:hover {
    background-color: #E64A19;
}

.cta-button.secondary-cta {
    background-color: #4CAF50; /* Green for secondary or alternative actions */
}
.cta-button.secondary-cta:hover {
    background-color: #43A047;
}

/* NEW HERO CALL BUTTON STYLES */
.cta-button.phone-hero-main {
    background-color: #4CAF50; /* Green, stands out, matches secondary-cta */
    color: white !important;
    padding: 15px 30px;
    font-size: 20px; /* Prominent font size */
    /* display: inline-block is inherited from .cta-button */
    /* border-radius: 50px is inherited */
    /* text-decoration: none is inherited */
    /* font-weight: 600 is inherited */
    /* transition is inherited */
    /* margin is inherited (10px 5px), adjust if needed specifically */
    margin-top: 0;
    margin-bottom: 0;
}
.cta-button.phone-hero-main i {
    margin-right: 10px;
}
.cta-button.phone-hero-main:hover {
    background-color: #43A047; /* Darker green on hover */
    /* transform: scale(1.05) is inherited */
}
/* END NEW HERO CALL BUTTON STYLES */


.cta-button.large-cta {
    font-size: 22px;
    padding: 20px 40px;
}


/* Stats Section */
.stats-section {
    background-color: #222; /* Slightly different from module for variation */
}
.stats {
    display: flex;
    justify-content: space-around;
    margin-top: 0; /* Already spaced by section padding */
    flex-wrap: wrap;
    gap: 15px; /* Added gap for better spacing */
}

.stat {
    text-align: center;
    background-color: #2a2a2a;
    padding: 20px 15px; /* Adjusted padding */
    border-radius: 10px;
    margin: 0; /* Removed margin, using gap now */
    flex: 1 1 250px; /* Responsive flex basis */
    transition: transform 0.3s, box-shadow 0.3s; /* Added box-shadow transition */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.stat:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.stat i {
    font-size: 40px; /* Increased icon size */
    margin-bottom: 10px; /* Increased margin */
    color: #4CAF50;
}

.stat h3 {
    font-size: 18px; /* Increased font size */
    margin: 10px 0 5px; /* Adjusted margin */
    font-weight: 600;
}

.stat p {
    font-size: 22px; /* Increased font size */
    font-weight: bold;
    margin: 5px 0;
    color: #FFD700; /* Highlight stat number */
}

.growth {
    color: #ccc; /* Subdued color for subtext */
    font-size: 14px;
    display: block;
    margin-top: 8px;
}

/* Problem Section Specifics */
#problem ul {
    list-style: none;
    padding-left: 0;
    margin: 20px auto 0; /* Center UL */
    display: table; /* For centering if no fixed width */
}
#problem ul li {
    font-size: 18px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.problem-icon {
    color: #FF5722; /* Reddish-orange for problem points */
    margin-right: 10px;
    font-size: 20px;
}
.solution-hint {
    font-size: 18px;
    text-align: center;
    margin-top: 25px;
    font-weight: 600;
}

/* Solution Section Specifics */
.solution-content {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
}
.solution-image {
    flex: 1 1 40%;
    text-align: center;
}
.solution-image img {
    max-width: 100%;
    border-radius: 10px;
}
.solution-text {
    flex: 1 1 55%;
}
.solution-text ul {
    list-style: none;
    padding: 0;
    margin: 15px auto 0; /* Center UL */
    display: table; /* For centering if no fixed width */
}
.solution-text ul li {
    font-size: 17px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.authority-icon {
    color: #4CAF50;
    margin-right: 10px;
    font-size: 20px;
}

/* Plan Section Specifics */
.plan-steps {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    margin-top: 30px;
    flex-wrap: wrap;
}
.plan-step {
    flex: 1 1 300px;
    background-color: #2a2a2a;
    padding: 25px;
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}
.plan-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.plan-icon-container {
    font-size: 48px;
    color: #FF5722;
    margin-bottom: 15px;
    background-color: #333;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.plan-step h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #4CAF50;
}

/* Services Section */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
    gap: 20px;
}

.service-item {
    background-color: #333;
    padding: 25px 20px; /* Adjusted padding */
    border-radius: 10px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    font-size: 18px; /* Added base font size */
    font-weight: 600;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.service-item i {
    font-size: 40px; /* Increased icon size */
    margin-bottom: 15px; /* Increased margin */
    color: #4CAF50;
    display: block; /* Make icon block for centering */
}

/* Testimonials Section */
.testimonial-carousel {
    position: relative;
    overflow: hidden;
    height: auto; /* Adjusted for variable content height */
    min-height: 220px; /* Ensure minimum height */
    margin-top: 20px;
    background-color: #333; /* Moved background here */
    border-radius: 10px; /* Moved radius here */
    padding: 25px; /* Moved padding here */
    box-sizing: border-box;
}

.testimonial-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden; /* Add visibility for better transition */
    transition: opacity 0.5s ease-in-out, visibility 0s 0.5s; /* Delay visibility change */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    /* Padding, background, radius moved to carousel parent */
}

.testimonial-item.active {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out;
}

.testimonial-item p {
    font-style: italic;
    margin-bottom: 15px; /* Increased margin */
    flex-grow: 0; /* Don't let it grow too much */
    overflow: visible; /* Allow text to wrap naturally */
    font-size: 17px; /* Adjusted size */
    line-height: 1.7;
    text-align: center; /* Center testimonial text */
}

.testimonial-item h4 {
    text-align: center; /* Center testimonial author */
    color: #4CAF50;
    margin: 0;
    white-space: normal;
    overflow: visible;
    font-size: 16px; /* Adjusted size */
}

.testimonial-nav {
    text-align: center;
    margin-top: 20px;
}
.testimonial-nav button {
    background: #FF5722;
    border: none;
    color: white;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 50%;
    cursor: pointer;
    margin: 0 5px;
    transition: background-color 0.3s;
    width: 40px;
    height: 40px;
}
.testimonial-nav button:hover {
    background: #E64A19;
}

/* Pricing / Value Stack Section */
.value-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 15px;
    margin-top: 20px;
}
.value-item {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 8px;
    font-size: 17px;
    display: flex;
    align-items: center;
}
.value-item i {
    color: #4CAF50;
    margin-right: 10px;
    font-size: 20px;
}

/* Before & After Section */
.before-after-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 20px;
}
.before-after-item {
    flex: 1 1 400px; /* Adjust as needed */
    max-width: 500px;
    text-align: center;
}
.before-after-item h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #FFD700;
}
.before-after-image {
    width: 100%;
    border-radius: 10px;
    margin-top: 0; /* Removed default margin */
    border: 3px solid #333;
}


/* Module Styles */
.module {
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 40px 30px; /* Increased padding */
    margin-bottom: 0; /* Sections are direct children of body now */
}
section:nth-child(even) .module, /* This will target #problem, #plan, #testimonials, #before-after, #final-cta */
.alternate-bg { /* .alternate-bg class takes precedence, used for #solution, #what-we-take, #pricing-value, #faq */
    background-color: #222; /* Darker shade for alternate sections */
}
/* Adjusting for the new banner: Now section:nth-child(odd) will be the darker ones if we count banner as child, but banner isn't a section.
   It is better to rely on .alternate-bg for consistent alternation.
   Let's remove the nth-child logic for module background if .alternate-bg is used consistently.
   The user has .stats-section as a separate class, and #solution, #what-we-take, #pricing-value, #faq use .alternate-bg.
   This logic is a bit mixed. I'll leave the existing nth-child rule as it was, but the .alternate-bg will override.
   The original was `section:nth-child(even) .module`. With the banner, the first section is `<header id="hero">`. Then `<section class="stats-section module">`.
   This means `.stats-section` will be odd (1st section after header) and get `#2a2a2a`. `#problem` will be even and get `#222`.
   This seems fine.
*/


section:not(#hero) { /* Add padding to sections that are not the hero */
    padding-top: 60px;
    padding-bottom: 60px;
}


.section-intro {
    font-size: 18px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 30px auto;
    color: #ddd;
}
section h2 { /* Styling for section titles */
    text-align: center;
    font-size: 32px;
    margin-bottom: 30px;
    font-weight: 600;
}


.icon {
    margin-right: 10px;
    font-size: 24px;
}

/* FAQ Styles */
.faq-item {
    border-bottom: 1px solid #444;
    padding: 20px 0; /* Increased padding */
}
.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question h3 {
    margin: 0;
    font-size: 20px; /* Increased font size */
    font-weight: 600;
}

.dropdown-icon {
    color: #FF5722; /* Changed color for visibility */
    transition: transform 0.3s;
    font-size: 20px; /* Added size */
}

.faq-item.active .dropdown-icon {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 15px 0 0; /* Adjusted padding */
    font-size: 16px;
    line-height: 1.7;
}
.faq-answer p {
    margin: 0;
}

.faq-item.active .faq-answer {
    display: block;
}

/* Pricing Section (from original CSS, might not be used directly if value stack is preferred) */
.price {
    font-size: 36px;
    font-weight: bold;
    color: #4CAF50;
}


/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Final CTA Section specific styles */
#final-cta .text-center { /* Ensure this class is applied to the container div if needed */
    text-align: center;
}
#final-cta p {
    font-size: 18px;
    margin-bottom: 20px;
    text-align: center; /* Ensure paragraph is centered */
}
.phone-link-large {
    font-size: 22px;
    color: #4CAF50;
    font-weight: bold;
    text-decoration: none;
}
.phone-link-large:hover {
    text-decoration: underline;
}
.secondary-cta-text {
    margin-top: 15px;
    font-size: 16px;
    text-align: center; /* Ensure this text is centered */
}
.final-trust-badges {
    margin-top: 30px;
}

/* Footer Styles */
.site-footer {
    background-color: #111;
    color: #aaa;
    padding: 30px 20px;
    text-align: center;
    font-size: 14px;
}
.site-footer p {
    margin: 5px 0;
}
.site-footer a {
    color: #4CAF50;
    text-decoration: none;
}
.site-footer a:hover {
    text-decoration: underline;
}


/* Trust Badges */
.trust-badge-container {
    display: flex;
    justify-content: center;
    gap: 15px; /* Adjusted gap */
    margin-top: 20px;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

.trust-badge {
    width: 70px; /* Adjusted size */
    height: auto;
    opacity: 0.9;
}


/* Form Status Message */
.form-status {
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
}
.form-status.success {
    color: #4CAF50;
}
.form-status.error {
    color: #FF5722;
}


/* Responsive Design */
@media (max-width: 992px) {
    h1.main-headline {
        font-size: 36px;
    }
    p.sub-headline {
        font-size: 18px;
    }
    .cta-button.phone-hero-main { /* Adjust new button for tablets */
        font-size: 18px;
        padding: 14px 28px;
    }
    .hero-form-container h2 {
        font-size: 24px;
    }
    .hero-benefits h3 {
        font-size: 20px;
    }
    .hero-benefits ul li {
        font-size: 16px;
    }
    section h2 {
        font-size: 28px;
    }
    .plan-step h3 {
        font-size: 20px;
    }
    .lead-magnet-banner { /* Adjust banner for tablets */
        font-size: 15px;
    }
}


@media (max-width: 768px) {
    .container {
        padding: 15px; /* Adjusted */
    }

    .lead-magnet-banner { /* Adjust banner for smaller mobiles */
        font-size: 14px;
        padding: 10px 15px;
    }
    .lead-magnet-banner p {
        /* No padding-right needed if no close button */
    }

    header#hero {
        padding: 40px 15px 60px;
    }

    h1.main-headline {
        font-size: 28px; /* Adjusted */
    }
    p.sub-headline {
        font-size: 16px; /* Adjusted */
    }

    .cta-button.phone-hero-main { /* Adjust new button for mobile */
        font-size: 16px; /* Further adjust for smaller screens */
        padding: 12px 20px; /* Adjust padding */
        /* display: block; /* Optionally make it full width if preferred */
        /* width: 90%;   /* If block and not 100% */
        /* margin-left: auto; */
        /* margin-right: auto; */
    }
    .hero-call-button-container {
        margin-bottom: 25px; /* Adjust spacing */
    }


    .hero-value-proposition {
        flex-direction: column;
        align-items: stretch; /* Make form and benefits full width */
    }
    .hero-form-container, .hero-benefits {
        flex-basis: auto; /* Reset flex-basis */
        width: 100%;
    }
    .hero-benefits {
        text-align: center; /* Center benefits block on mobile */
    }
     .hero-benefits ul {
        display: inline-block; /* Allow centering of ul block */
        text-align: left; /* Keep li text itself left-aligned for readability */
        margin: 0 auto; /* Center the ul block */
    }
    .hero-benefits h3 { /* Ensure h3 is also centered on mobile */
        text-align: center;
    }


    .stats {
        flex-direction: column;
    }
    
    .stat {
        margin: 10px 0; /* Add margin back for column layout */
        padding: 15px;
        text-align: center; /* Ensure content within stat is centered */
    }
    
    .services-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ensure responsive grid */
    }

    .solution-content {
        flex-direction: column;
    }
    .solution-image, .solution-text {
        flex-basis: auto;
        width: 100%;
        text-align: center; /* Center text content */
    }
     .solution-text ul { /* Center the list block */
        display: inline-block;
        text-align: left; /* Keep list items left-aligned */
        margin: 15px auto 0;
    }

    .plan-steps {
        flex-direction: column;
    }
    .plan-step {
        margin-bottom: 20px;
        text-align: center; /* Ensure plan step content is centered */
    }


    .testimonial-carousel {
        min-height: 280px; /* Adjusted for mobile */
        padding: 20px; /* Adjust padding for mobile */
    }

    .testimonial-item p {
        font-size: 15px; /* Adjusted */
    }

    .testimonial-item h4 {
        font-size: 14px; /* Adjusted */
    }

    .module {
        padding: 30px 15px; /* Adjusted */
    }
    section:not(#hero) {
        padding-top: 40px;
        padding-bottom: 40px;
    }
    section h2 {
        font-size: 26px; /* Adjusted */
        margin-bottom: 20px;
    }

    .cta-button {
        padding: 12px 25px; /* Adjusted */
        font-size: 16px; /* Adjusted */
    }
    #hero-quote-form .cta-button.primary-cta { /* Specifically target form submit button on mobile */
        font-size: 18px; /* Keep it prominent */
        padding: 15px 30px;
    }
    .cta-button.large-cta {
        font-size: 20px;
        padding: 18px 35px;
    }

    .value-stack-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
    }
    .value-item {
        justify-content: center; /* Center content within value item if desired */
    }


    .before-after-container {
        flex-direction: column;
    }
    .before-after-item {
        margin-bottom: 20px;
        text-align: center; /* Ensure before/after item content is centered */
    }

    .faq-question h3 {
        font-size: 18px;
    }
    .faq-answer {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .lead-magnet-banner {
        font-size: 13px; /* Slightly smaller for very small screens */
        line-height: 1.4;
    }
    h1.main-headline {
        font-size: 24px;
    }
    p.sub-headline {
        font-size: 15px;
    }
    .cta-button.phone-hero-main { /* Further adjustments for very small mobile */
        font-size: 14px;
        padding: 10px 15px;
        width: 95%; /* Make it almost full width to ensure readability */
        display: block;
        margin-left: auto;
        margin-right: auto;
        box-sizing: border-box;
    }
    .hero-call-button-container {
        margin-bottom: 20px;
    }

    .hero-form-container h2 {
        font-size: 22px;
    }
    .hero-form-container > p { /* Target direct child p */
        font-size: 14px;
    }
    #hero-quote-form input, #hero-quote-form textarea {
        font-size: 15px;
    }
    #hero-quote-form .cta-button.primary-cta {
        font-size: 16px; /* Adjust form submit button */
        padding: 14px 25px;
    }


    .stat i {
        font-size: 32px;
    }

    .stat h3 {
        font-size: 16px;
    }

    .stat p {
        font-size: 20px;
    }

    .service-item {
        padding: 20px 15px; /* Adjusted */
        font-size: 16px;
        text-align: center; /* Ensure service item content is centered */
    }

    .service-item i {
        font-size: 32px; /* Adjusted */
    }

    .testimonial-carousel {
        min-height: 300px; /* Adjusted */
    }

    .price { /* From original CSS */
        font-size: 24px;
    }

    section h2 {
        font-size: 22px;
    }
    .faq-question h3 {
        font-size: 16px;
    }
    .phone-link-large {
        font-size: 20px;
    }
}

/* Sticky CTA Styles */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(45deg, #4CAF50, #2196F3);
    padding: 10px 15px; /* Reduced padding */
    box-sizing: border-box;
    z-index: 9999;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
}
.sticky-cta.visible {
    transform: translateY(0);
}

.sticky-cta-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Space out elements */
    align-items: center;
    gap: 10px;
}

.sticky-cta-text {
    font-size: 16px; /* Reduced size */
    font-weight: bold;
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0,0,0,0.5);
    flex-grow: 1; /* Allow text to take available space */
    text-align: left; /* Ensure text is left aligned if it wraps */
}

.sticky-cta-button {
    background-color: #FF5722;
    border: none;
    color: #ffffff !important;
    padding: 10px 20px; /* Reduced padding */
    font-size: 14px; /* Reduced size */
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
    text-decoration: none !important;
    white-space: nowrap; /* Prevent button text from wrapping */
    flex-shrink: 0; /* Prevent buttons from shrinking too much */
}
.sticky-cta-button.phone-button {
    background-color: #333; /* Different color for call button */
}

.sticky-cta-button:hover {
    background-color: #E64A19;
    transform: scale(1.05);
}
.sticky-cta-button.phone-button:hover {
    background-color: #555;
}


@media (max-width: 600px) { /* Adjust breakpoint for sticky CTA */
    .sticky-cta-text {
        display: none; /* Hide text on very small screens */
    }
    .sticky-cta-content {
        justify-content: space-around; /* Center buttons when text is hidden */
    }
}

@media (max-width: 480px) {
    .sticky-cta-button {
        padding: 8px 15px; /* Further reduce padding */
        font-size: 13px; /* Further reduce font size */
    }
     .sticky-cta-button i { /* Ensure icon is not too large */
        margin-right: 5px;
    }
}


/* Formspree specific form styling if needed (covered by general form styles mostly) */
#quote-form { /* If using this specific ID for a multi-step form, otherwise remove */
    background-color: #2a2a2a;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 40px;
    color: #fff;
}


/* Keyframes for animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
/* Restyle every tel: link to match the site’s green accent */
a[href^="tel:"] {
  color: #4CAF50;           /* matches your .highlight/green accents */
  font-weight: 600;         /* a bit bolder so it’s more visible on dark bg */
  text-decoration: none;    /* remove default underline */
  transition: color 0.2s ease-in-out;
}

a[href^="tel:"]:hover {
  text-decoration: underline; /* subtle underline on hover for clarity */
  color: #66BB6A;             /* slightly lighter green on hover */
}

/* ===========================
   TINY ADJUSTMENTS FOR MOBILE
   “Solution”-section feature list
   =========================== */

/* 1) Base styles for .solution-text ul li */
.solution-text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.solution-text ul li {
  display: flex;
  flex-direction: row;           /* default: icon + text side by side */
  align-items: flex-start;
  padding: 12px 16px;
  margin-bottom: 12px;
  background-color: #333;        /* slightly lighter than the section's bg */
  border-radius: 8px;
  transition: background-color 0.2s;
}
.solution-text ul li:hover {
  background-color: #3a3a3a;
}

/* 2) Icon on the left, but with a fixed minimum width so text never overlaps */
.solution-text ul li i.authority-icon {
  flex-shrink: 0;
  font-size: 24px;
  color: #4CAF50;
  margin-right: 12px;
  margin-top: 4px;      /* nudge down so it lines up better with the first line of text */
}

/* 3) Force <strong> labels onto their own line, bolded larger */
.solution-text ul li strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
  margin-bottom: 4px;    /* small gap between label and description */
  color: #ffffff;
}

/* 4) Ensure the description text wraps cleanly, slightly smaller/light-gray */
.solution-text ul li {
  color: #ddd;
  line-height: 1.4;
  font-size: 15px;
}

/* 5) On tablet widths, reduce padding & font-size slightly */
@media (max-width: 768px) {
  .solution-text ul li {
    padding: 10px 14px;
  }
  .solution-text ul li i.authority-icon {
    font-size: 22px;
    margin-right: 10px;
  }
  .solution-text ul li strong {
    font-size: 17px;
  }
  .solution-text ul li {
    font-size: 14px;
  }
}

/* 6) ON MOBILE (≤480px), stack icon ABOVE the text, center everything */
@media (max-width: 480px) {
  .solution-text ul li {
    flex-direction: column;       /* icon above, then text */
    text-align: center;           /* center‐align the entire “card” */
    padding: 12px;
  }
  .solution-text ul li i.authority-icon {
    margin: 0 auto 8px;           /* center icon, add bottom margin */
    font-size: 26px;
  }
  .solution-text ul li strong {
    font-size: 17px;
    margin-bottom: 6px;
  }
  .solution-text ul li {
    font-size: 15px;
    line-height: 1.5;
  }
}

/* (Optional) If you’d like a tiny transition on hover for mobile as well: */
@media (max-width: 480px) {
  .solution-text ul li:hover {
    background-color: #3a3a3a;
  }
}