/* =============================================================
   site.css — Global Stylesheet
   Funk Builders Razor Pages Application
   
   Table of Contents:
     1.  Base & Typography
     2.  Navbar
     3.  Hover Dropdown (desktop only)
     4.  Get Quote Button
     5.  Hero Section
     6.  Hero Background Cross-Fade Layers
     7.  Section Styles
     8.  Card Styles
     9.  Gallery Grid
     10. Large Gallery Grid (service pages)
     11. Feature Blocks (alternating image/text)
     12. Process Steps
     13. Footer
     14. Form Styles
     15. Why Choose Us
         15a. Parallax Background - Why Choose Us
         15a-ii. PARALLAX — Services Overview
         15b. WHY CHOOSE — Overlap Card
         15c. FAQ Category Pills
     16. Responsive Overrides
   ============================================================= */


/* =============================================================
   1. BASE & TYPOGRAPHY
   Default font sizes, font families, and body color.
   'Open Sans' used for body text; 'Playfair Display' for headings.
   Both loaded via Google Fonts in _Layout.cshtml.
   ============================================================= */
html {
    font-size: 14px;
    font-family: 'Monserrat', sans-serif;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin: 0;
    padding: 0;
    color: #2c2c2c;
}

h1, h2, h3, h4, h5 {
    font-family:'Raleway', sans-serif;
}


/* =============================================================
   2. NAVBAR
   Overrides Bootstrap navbar defaults to match brand colors.
   Hover state uses the brand gold (#8b6914).
   ============================================================= */
.navbar {
    padding: 0.0rem 0rem;
}

.navbar .nav-link {
    color: #2c2c2c !important;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem !important;
    transition: color 0.2s;
}

.navbar .nav-link:hover {
    color: #8b6914 !important;
}


/* =============================================================
   3. HOVER DROPDOWN (DESKTOP ONLY)
   Replaces Bootstrap's click-to-open dropdown with a CSS
   hover-based reveal on screens >= 992px.
   Uses opacity + visibility + transform for a smooth fade-in.
   ============================================================= */
@media (min-width: 992px) {
    .hover-dropdown {
        position: relative;
    }

    .hover-dropdown .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        margin-top: 0;
        border: none;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border-radius: 8px;
        min-width: 220px;
        padding: 0.5rem 0;
    }

    .hover-dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .hover-dropdown .dropdown-item {
        padding: 0.6rem 1.25rem;
        font-weight: 500;
        transition: background-color 0.15s, color 0.15s;
    }

    .hover-dropdown .dropdown-item:hover {
        background-color: #f5f0e6;
        color: #5c4a1e;
    }
}


/* =============================================================
   4. GET QUOTE BUTTON
   Prominent CTA button in the navbar.
   Brand dark brown (#5c4a1e) base, gold (#8b6914) on hover.
   ============================================================= */
.btn-get-quote {
    background-color: #5c4a1e;
    color: #fff !important;
    border: none;
    padding: 0.5rem 1.25rem;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.btn-get-quote:hover {
    background-color: #8b6914;
    color: #fff !important;
}


/* =============================================================
   5. HERO SECTION
   Full-width banner with centered content overlay.
   Dark overlay (.hero-overlay) improves text legibility over images.
   Background color (#333) acts as a fallback while images load.
   ============================================================= */
.hero-section {
    position: relative;
    height: 500px;
    width: 100%;
    min-height: 200px;
    overflow: hidden;
    object-fit :contain;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    color: #fff;
    background-color: #333;
}

.hero-section .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 2rem 0;
}

.hero-content h1 {
    font-size: 2.1rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .2rem;
    white-space: wrap
}

.hero-content p {
    font-family: 'Raleway', sans-serif;
    font-size: 1.25rem;
}

/* Pill-shaped CTA link used inside hero sections. */
.cta-pill {
    display: inline-block;
    border: 2px solid #c9953c;
    border-radius: 50px;
    padding: 0.15rem 1.25rem;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s;
    font-size: 1.3rem;
    margin-top: 0.0rem;
    margin-bottom: 0.5rem;
}

.cta-pill:hover {
    background-color: rgba(201, 149, 60, 0.3);
    color: #fff;
}


/* =============================================================
   6. HERO BACKGROUND CROSS-FADE LAYERS
   Multiple .bg-image divs are injected by site.js and stacked
   absolutely within .hero-section. The active image fades to
   opacity: 1 while others remain at opacity: 0, creating a
   smooth cross-fade transition every 5 seconds.
   ============================================================= */
.hero-section .bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity 1.2s ease-in-out;
    opacity: 0;
    z-index: 0;
}

.hero-section .bg-image.bg1 {
    background-image: url('/images/benches1.jpg');
    opacity: 1; /* visible by default until JS initialises */
}

.hero-section .bg-image.bg2 {
    background-image: url('/images/benches2.jpg');
}

/* Slower cross-fade for FAQ hero */
.hero-section.hero-slow .bg-image {
    transition: opacity 2.5s ease-in-out;
}

/* FAQ hero images (faqcomp.png ~3.03:1, faqprice1.png ~2.72:1) are graphics
   with baked-in text/pricing, not plain photos — use "contain" instead of
   "cover" so the full image (and all of its text) is always visible, never
   cropped. The section's own box is shaped to roughly the same ratio (via
   aspect-ratio, overriding the fixed/breakpoint heights on .hero-section)
   so "contain" has little to no letterboxing to fill in the first place.
   !important is used because .hero-section sets a fixed height at three
   different breakpoints and inline styles — this is the one page that
   needs to escape all of them. */
.hero-faq {
    height: auto !important;
    aspect-ratio: 1536 / 534;
    max-height: 480px;
    min-height: 220px;
}

.hero-faq .bg-image {
    background-size: contain;
}


/* =============================================================
   7. SECTION STYLES
   Reusable section wrappers for consistent vertical rhythm
   and themed background colors.
   ============================================================= */

/* Standard vertical padding for all content sections. */
.section-padding {
    padding: 5rem 0;
}
    /* Pillar icon and text styling used in that section */
    .what-sets-apart .fs-1 {
        font-size: 3rem;
        line-height: 1;
        display: inline-block;
        margin-bottom: 0.0rem;
        color: #5c4a1e; /* icon color */
    }

    .what-sets-apart h5 {
        margin-top: 0.0rem;
        margin-bottom: 0.0rem;
        color: #2c2c2c;
    }

    .what-sets-apart p {
        color: #555;
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

/* small responsive tweaks */
@media (max-width: 767px) {
    .what-sets-apart::before,
    .what-sets-apart::after {
        height: 60px;
        background-size: 140% auto;
    }

    .what-sets-apart {
        padding: 3rem 0;
    }

        .what-sets-apart .fs-1 {
            font-size: 2.2rem;
        }
}

/* Muted green highlight block (e.g. "Why Choose Us" panels). */
.section-highlight {
    background-color: #dce8dc;
    border-radius: 8px;
    padding: 2rem;
}

/* Light background section (e.g. "What Sets Us Apart"). */
.section-light {
    background-color: #253b2f;
    color: #fff;
    padding: 2rem 0;
}

.section-light h2,
.section-light h5 {
    color: #fff;
}

.section-light p {
    color: rgba(255, 255, 255, 0.85);
}

/* Dark background section for high-contrast content blocks. */
.section-dark {
    background-color: #2c2c2c;
    color: #fff;
}

/* CTA section with a background image and dark overlay for legibility. */
.cta-background {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
}

.cta-background::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 0;
}

.cta-background .container {
    position: relative;
    z-index: 1;
}

/* =============================================================
   8. CARD STYLES
   Service cards used on the home page and Services overview.
   Lift on hover via transform + box-shadow for interactivity.
   ============================================================= */
.service-card {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.service-card img {
    height: 220px;
    object-fit: cover;
    width: 100%;
}

.service-card .card-body {
    padding: 1.5rem;
}


/* =============================================================
   9. GALLERY GRID
   Responsive auto-fill grid for general image galleries.
   Images maintain a fixed height with object-fit cover cropping.
   Scale-up on hover for a subtle interactive effect.
   ============================================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.gallery-grid img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s;
}

.gallery-grid img:hover {
    transform: scale(1.03);
}


/* =============================================================
   10. LARGE GALLERY GRID (SERVICE PAGES)
   Fixed 3-column grid used on individual service pages
   (Decks, Fences, Benches, etc.). Collapses to 2 columns on
   tablets and 1 column on mobile.
   ============================================================= */
.gallery-grid-lg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.gallery-grid-lg .gallery-item {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.gallery-grid-lg .gallery-item img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.gallery-grid-lg .gallery-item:hover img {
    transform: scale(1.06);
}

@media (max-width: 991px) {
    .gallery-grid-lg {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .gallery-grid-lg {
        grid-template-columns: 1fr;
    }
}


/* =============================================================
   11. FEATURE BLOCKS (ALTERNATING IMAGE/TEXT)
   Used on service pages to alternate image and text side-by-side.
   .feature-image-wrapper.bg-bg uses a background-image instead
   of an <img> tag, allowing text to overlap the image on desktop.
   The .overlap modifier pulls the text block left on large screens.
   ============================================================= */
.feature-block {
    padding: 1.5rem 0;
}

.feature-image-wrapper img {
    width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: cover;
}

/* Background-image variant — used when text overlaps the image. */
.feature-image-wrapper.bg-bg {
    width: 100%;
    height: 100%;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Pulls the text block left so it overlaps the image on desktop. */
.feature-text-block.overlap {
    position: relative;
    z-index: 2;
    margin-left: -180px;
    padding-left: 2rem;
    background: transparent;
}

@media (max-width: 991px) {
    .feature-text-block.overlap {
        margin-left: 0;
        padding-left: 0;
    }

    .feature-image-wrapper.bg-bg {
        min-height: 220px;
    }
}

.feature-text-block h3 {
    margin-bottom: 1rem;
    color: #2c2c2c;
}

.feature-text-block p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #555;
}

/* Vertically centers text within the feature block column. */
.feature-block .feature-text-block,
.feature-block .why-choose-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Checkmark list used within feature text blocks. */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 0 0;
}

.feature-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.6rem;
    font-size: 1rem;
    color: #444;
}

/* Gold checkmark pseudo-element before each list item. */
.feature-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #5c4a1e;
    font-weight: 700;
}


/* =============================================================
   12. PROCESS STEPS
   Numbered circular step indicators used on service pages to
   illustrate the project workflow (e.g. Consult → Build → Done).
   ============================================================= */
.process-step {
    padding: 1.5rem;
}

/* Circular step number badge. */
.process-number {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #5c4a1e;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.process-step h5 {
    font-family: 'Playfair Display', serif;
}


/* =============================================================
   13. FOOTER
   Dark background site footer. Link hover transitions to white
   for contrast against the dark (#1a1a1a) background.
   ============================================================= */
.site-footer {
    background-color: #1e3527;
}

    .site-footer a {
        text-decoration: none;
        font-family: 'Montserrat', sans-serif;
        transition: color 0.2s;
    }

    .site-footer a:hover {
        color: #8b6914 !important;
    }


/* =============================================================
   14. FORM STYLES
   Scoped to .form-funk to avoid overriding Bootstrap globally.
   Used on Contact (/Contact) and Get Quote (/GetQuote) pages.
   Focus ring uses brand gold to maintain visual consistency.
   ============================================================= */
.form-funk .form-control,
.form-funk .form-select {
    border-radius: 6px;
    padding: 0.75rem 1rem;
    border: 1px solid #ccc;
}

.form-funk .form-control:focus,
.form-funk .form-select:focus {
    border-color: #8b6914;
    box-shadow: 0 0 0 0.2rem rgba(139, 105, 20, 0.25);
}

/* Primary submit button for .form-funk forms. */
.btn-funk {
    background-color: #5c4a1e;
    color: #fff;
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.btn-funk:hover {
    background-color: #8b6914;
    color: #fff;
}

/* =============================================================
   15a. PARALLAX BACKGROUND — Why Choose Us
   Fixed background image that scrolls at a different rate
   than the foreground content, creating a depth effect.
   ============================================================= */
.parallax-section {
    position: relative;
    background-image: url('../images/pics/davidwhite.jpg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
}

/* Dark overlay so the overlap-card text stays readable */
.parallax-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
}

/* Keep inner content above the overlay */
.parallax-section > .container {
    position: relative;
    z-index: 1;
}

/* iOS / mobile: background-attachment:fixed is unsupported,
   fall back to a normal scroll with a slightly darker overlay */
@supports (-webkit-touch-callout: none) {
    .parallax-section {
        background-attachment: scroll;
    }
}

@media (max-width: 767px) {
    .parallax-section {
        background-attachment: scroll;
    }
}

/* =============================================================
   15b. WHY CHOOSE — Overlap Card
   White text & "Learn More" button for the parallax section.
   ============================================================= */
.why-overlap-wrapper {
    max-width: 900px;
}
    
.why-overlap-text {
    --text-bg-opacity: 0.55;
    color: #fff;
    background: rgba(0, 0, 0, var(--text-bg-opacity));
    padding: 1.5rem;
    border-radius: 10px;
}

.why-overlap-text h2 {
    color: #fff;
}

.why-overlap-text p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.8;
}

/* Outline button used inside dark / parallax sections */
.btn-outline-light-custom {
    display: inline-block;
    border: 2px solid #c9953c;
    border-radius: 50px;
    padding: 0.5rem 1.75rem;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: background-color 0.2s, color 0.2s;
    margin-top: 1rem;
}

.btn-outline-light-custom:hover {
    background-color: rgba(201, 149, 60, 0.35);
    color: #fff;
}


/* =============================================================
   15c. FAQ CATEGORY PILLS
   Nav-pills used on the FAQ page to switch between Deck,
   Fencing, and Railings question sets. Matches brand gold
   (#8b6914) / dark brown (#5c4a1e) used elsewhere on the site.
   ============================================================= */
.faq-category-nav .nav-link {
    color: #5c4a1e;
    background-color: #f5f0e6;
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 0.6rem 1.75rem;
    margin: 0 0.4rem;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.faq-category-nav .nav-link:hover {
    background-color: #ecdfc4;
}

.faq-category-nav .nav-link.active {
    background-color: #5c4a1e;
    color: #fff;
}

@media (max-width: 576px) {
    .faq-category-nav .nav-link {
        margin: 0.25rem;
    }
}


/* =============================================================
   16. RESPONSIVE OVERRIDES
   Mobile-specific adjustments. Bootstrap's grid handles most
   column stacking automatically via col-md / col-lg classes.
   These rules fine-tune spacing, font sizes, and touch targets
   for small screens.
   ============================================================= */

/* --- Tablets and below (< 768px) --- */
@media (max-width: 767px) {

    /* Reduce hero height and heading size for small screens */
    .hero-section {
        height: 300px;
    }

    .hero-content h1 {
        font-size: 1.6rem;
    }

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

    /* Reduce section vertical padding to avoid excessive scrolling */
    .section-padding {
        padding: 2rem 0;
    }

    /* Stack CTA buttons vertically on small screens */
    .section-dark .btn,
    .section-dark .btn-get-quote {
        display: block;
        width: 100%;
        margin-bottom: 0.75rem;
        margin-right: 0 !important;
    }

    /* Reduce card image height for faster visual scanning */
    .service-card img {
        height: 180px;
    }

    /* Ensure gallery images don't get too tall on narrow screens */
    .gallery-grid img {
        height: 200px;
    }

    /* Make form buttons full-width for easier tap targets */
    .btn-funk {
        width: 100%;
        padding: 0.875rem 1.5rem;
    }

    /* Reduce feature block padding */
    .feature-block {
        padding: 1rem 0;
    }

    /* Process steps: 2 columns instead of 4 on small tablets */
    .process-step {
        padding: 1rem;
    }
}

/* --- Phones only (< 576px) --- */
@media (max-width: 575px) {

    /* Further reduce hero for phones */
    .hero-section {
        height: 250px;
    }

    .hero-content {
        padding: 1rem;
    }

    .hero-content h1 {
        font-size: 1.4rem;
    }

    /* Tighter section padding on phones */
    .section-padding {
        padding: 2rem 0;
    }

    /* Navbar brand logo smaller on phones */
    .navbar-brand img {
        height: 50px;
    }

    /* Full-width Get Quote button in navbar on phones */
    .btn-get-quote {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 0.5rem;
    }

    /* Gallery grid: single column with shorter images */
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-grid img {
        height: 180px;
    }

    /* Feature image wrappers shorter on phones */
    .feature-image-wrapper.bg-bg {
        min-height: 180px;
    }

    /* CTA pill (hero phone link) easier to tap */
    .cta-pill {
        display: inline-block;
        text-align: center;
        margin-top: 0.75rem;
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
        font-family: 'Raleway', sans-serif;
    }
}

/* =============================================================
   TOP CONTACT BAR
   Red banner above the navbar with centered contact info.
   ============================================================= */
.top-bar {
    background-color: #1e3527;
    color: #ffffff;
    text-align: center;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Montserrat', sans-serif;
}

.top-bar a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.top-bar a:hover {
    text-decoration: underline;
}

/* =============================================================
   7b. TESTIMONIAL SECTION
   Full-width wood-background panel with dark overlay.
   Follows the same overlay pattern as .cta-background.
   ============================================================= */
.testimonial-section {
    position: relative; /* ← ADDED: contains the ::before overlay */
    background-image: url('/images/progframe_converted.jpg');
    background-position: center; /* ← FIXED: removed stray ')' */
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

.testimonial-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 0;
}

.testimonial-section .container {
    position: relative;
    z-index: 1;
}

.testimonial-section h2 {
    font-family: 'Raleway', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1em;
}

/* Carousel layout */
.testimonial-carousel {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.testimonial-slide {
    display: none;
    flex: 1;
}

.testimonial-slide.active {
    display: block;
}

.testimonial-quote p {
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1rem;
}

.testimonial-attribution {
    font-size: 0.95rem;
    opacity: 0.85;
    margin-top: 0.5rem;
}

/* Prev / Next arrows */
.testimonial-arrow {
    background: none;
    border: none;
    color: #c9953c;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.5rem;
    transition: color 0.2s;
    flex-shrink: 0;
}

.testimonial-arrow:hover {
    color: #e2b45a;
}

@media (max-width: 767px) {
    .testimonial-quote p {
        font-size: 0.95rem;
    }

    .testimonial-arrow {
        font-size: 2rem;
    }
}

/* =============================================================
   8b. SERVICES CAROUSEL
   Dark circular arrow controls visible against section-light.
   ============================================================= */
#servicesCarousel {
    position: relative;
}

#servicesCarousel .carousel-control-prev,
#servicesCarousel .carousel-control-next {
    width: 4%;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    align-items: center;
}

#servicesCarousel .carousel-control-prev-icon,
#servicesCarousel .carousel-control-next-icon {
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    padding: 1.25rem;
    background-size: 50%;
}

/* Indicator dots — placed below the slides */
#servicesCarousel .services-indicators {
    position: relative;
    bottom: auto;
    margin-top: 1.5rem;
}

#servicesCarousel .services-indicators button {
    background-color: #999;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
}

#servicesCarousel .services-indicators button.active {
    background-color: #6b4f2e;
}

/* =============================================================
   TRUST BADGES BAR
   Horizontal strip of partner / certification logos below the
hero.  Background matches the dark maroon from the design.
To swap a badge, just change the image path in the
trustBadges array inside Index.cshtml.
   ============================================================= */
.trust-badges-bar {
    background-color: #253b2f;
    padding: 1.5rem 0;
}

.trust-badges-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.trust-badge-item img {
    max-height: 90px;
    width: auto;
    object-fit: contain;
    filter: brightness(1);
    transition: filter 0.25s ease;
}

.trust-badge-item img:hover {
    filter: brightness(1.15);
}

/* On mobile, shrink badges and tighten spacing */
@media (max-width: 767px) {
    .trust-badges-track {
        gap: 1.25rem;
    }

    .trust-badge-item img {
        max-height: 60px;
    }
}

/* =============================================================
   15b. PARALLAX SERVICES — Distinct background & text color
   Uses a separate parallax background image so the two
parallax sections feel visually distinct while scrolling.
   ============================================================= */
.parallax-services {
    background-image: url('../images/pics/finishkelly.jpg');
    color: #fff;
}

.parallax-services h2 {
    color: #fff;
}

/* =============================================================
   17. GOOGLE REVIEWS SECTION
   Displays a Google Reviews summary header with rating + CTA,
   followed by a responsive grid of individual review cards.
   ============================================================= */
.google-reviews-section {
    background-color: #f5f5f5;
}

/* --- Summary header bar --- */
.google-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 1.5rem;
}

.google-logo-text {
    font-size: 1.65rem;
    font-weight: 500;
    font-family: 'Product Sans', 'Roboto', Arial, sans-serif;
    letter-spacing: -0.5px;
}

.google-logo-text .g-blue   { color: #4285F4; }
.google-logo-text .g-red    { color: #EA4335; }
.google-logo-text .g-yellow { color: #FBBC05; }
.google-logo-text .g-green  { color: #34A853; }
.google-logo-text .reviews-label {
    color: #444;
    font-size: 1.35rem;
    margin-left: 0.35rem;
}

.google-rating-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.google-rating-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222;
}

.google-stars {
    color: #FBBC05;
    font-size: 1.35rem;
    letter-spacing: 2px;
}

.google-review-count {
    color: #777;
    font-size: 0.95rem;
}

.btn-review-google {
    display: inline-block;
    background-color: #4285F4;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 0.65rem 1.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.btn-review-google:hover {
    background-color: #3367d6;
    color: #fff;
}

/* --- Review card carousel ---
   Reuses .testimonial-carousel (max-width 800px, flex, manual prev/next
   arrows — see section 3 in site.js). This just caps how wide a single
   review card gets inside that flex slot. */
.google-reviews-carousel .google-review-card {
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
}

.google-review-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Card header: avatar + name row */
.review-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.review-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-google-icon {
    position: absolute;
    bottom: -2px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    padding: 1px;
}

.review-author {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #222;
}

.verified-badge {
    color: #4285F4;
    font-size: 0.8rem;
    margin-left: 2px;
}

.review-date {
    display: block;
    font-size: 0.8rem;
    color: #999;
}

.review-stars {
    color: #FBBC05;
    font-size: 1.15rem;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.review-text {
    color: #444;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 575px) {
    .google-reviews-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-review-google {
        width: 100%;
        text-align: center;
    }
}