/*
 * Zillow-Inspired Homepage Revamp
 * Theme: Homzen
 * Scope: Homepage sections only — header, footer, and property cards are untouched.
 *
 * Sections covered:
 *  1. Hero Banner
 *  2. Search Bar (inside hero)
 *  3. Explore Cities / Location
 *  4. Services / How-It-Works + Stats Counter
 *  5. Testimonials
 *  6. CTA Banner
 */


/* ============================================================
   1. HERO BANNER — Compact, left-aligned, photo background
   ============================================================ */

/* High-resolution photo background — only applied when no CMS image is set */
.zillow-hero.flat-slider.home-1 {
    background-image: url('/themes/homzen/images/hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center 30% !important;
    background-repeat: no-repeat !important;
}

/* Reduce top gap and add more bottom breathing room below the search bar.
   Top reduction and bottom increase are equal, so hero height stays unchanged. */
.zillow-hero.flat-slider.home-1 .slider-content {
    padding: 68px 0 112px !important;
}

/* Lower hero z-index so category circles (z-index > 123) can overlap from below.
   The header lives outside this element so its own z-index is unaffected. */
.zillow-hero.flat-slider.home-1 {
    z-index: 1 !important;
}

/* Directional gradient overlay — dark on left for text legibility,
   fades to translucent on right so the property photo shows through */
.zillow-hero.flat-slider.home-1 .overlay {
    background: linear-gradient(
        to right,
        rgba(8, 22, 36, 0.82) 0%,
        rgba(8, 22, 36, 0.55) 45%,
        rgba(8, 22, 36, 0.18) 100%
    ) !important;
    opacity: 1 !important;
}

/* Left-align the headline content (overrides Bootstrap .text-center) */
.zillow-hero.flat-slider.home-1 .slider-content .zillow-hero__text {
    text-align: left !important;
    max-width: 700px;
}

/* Compact headline sizing */
.zillow-hero.flat-slider.home-1 .slider-content .heading {
    margin-bottom: 24px !important;
}

.zillow-hero.flat-slider.home-1 .slider-content .heading h1,
.zillow-hero.flat-slider.home-1 .slider-content .heading .animationtext {
    font-size: clamp(3.6rem, 7vw, 5rem) !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    line-height: 1.1 !important;
}

/* Prevent the animated word from clipping its last character.
   The theme's slide animation keeps overflow hidden on .cd-words-wrapper,
   while JS measures and sets its width very tightly. A tiny content-box
   right padding preserves the slide effect but gives letters like the final
   "e" in "Dream Home" enough room to render fully. */
.zillow-hero.flat-slider.home-1 .slider-content .heading .cd-words-wrapper,
.zillow-hero.flat-slider.home-1 .slider-content .heading .tf-text.cd-words-wrapper {
    box-sizing: content-box !important;
    padding-right: 0.12em !important;
}

/* Remove the large 280px side padding on subtitle; left-align */
.zillow-hero.flat-slider.home-1 .slider-content .subtitle {
    padding: 0 !important;
    max-width: 600px;
    text-align: left !important;
    font-size: 1.45rem;
    line-height: 1.75;
    margin-top: 18px !important;
}

/* Responsive adjustments for hero */
@media (max-width: 991px) {
    .zillow-hero.flat-slider.home-1 .slider-content {
        padding: 48px 0 97px !important;
    }
}

@media (max-width: 575px) {
    .zillow-hero.flat-slider.home-1 .slider-content {
        padding: 32px 0 83px !important;
    }

    .zillow-hero.flat-slider.home-1 .slider-content .zillow-hero__text {
        text-align: left !important;
        max-width: 100%;
    }

    /* Slightly tighter headline on very narrow screens */
    .zillow-hero.flat-slider.home-1 .slider-content .heading h1,
    .zillow-hero.flat-slider.home-1 .slider-content .heading .animationtext {
        font-size: clamp(2.8rem, 10vw, 3.6rem) !important;
        letter-spacing: -0.5px;
        /* Keep h1 as a normal block — DO NOT use flex here.
           The cd-headline JS animation sets inline width on .cd-words-wrapper
           and cycles visibility classes; flex disrupts that engine and causes
           a visible "blink" on every animation cycle.                        */
        display: block !important;
    }

    /* ROOT CAUSE FIX:
       The theme's compiled style.css contains this rule at max-width:767px —
         .animationtext.slide .cd-words-wrapper { text-align: center }
       — which centers "Dream Home" while "Find Your" stays left-aligned.
       The theme also sets width:100%!important on .cd-words-wrapper at ≤767px,
       so the span always occupies the full h1 width and wraps to its own line.
       All we need is to flip text-align to left so both lines share the same edge.
       !important defeats both the theme rule AND any JS-injected inline width.  */
    .zillow-hero.flat-slider.home-1 .slider-content .heading .cd-words-wrapper,
    .zillow-hero.flat-slider.home-1 .slider-content .heading .tf-text.cd-words-wrapper {
        text-align: left !important;
        width: 100% !important;   /* belt-and-suspenders: defeats JS inline width too */
    }

    /* Tighten subtitle font on mobile */
    .zillow-hero.flat-slider.home-1 .slider-content .subtitle {
        font-size: 1.1rem !important;
        line-height: 1.6 !important;
    }
}


/* ============================================================
   2. SEARCH BAR — Zillow-style: glass tabs above + clean white form card
   ============================================================ */

/* ── Outer wrapper: transparent — the white card lives on .tab-content only ── */
.zillow-hero .zillow-searchbar {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    max-width: 520px;
    margin-top: 32px;
}

/* ── Hide "For Rent / For Sale" tab pills — DOM & JS kept intact ── */
.zillow-hero .zillow-searchbar .nav-tab-form.style-1 {
    display: none !important;
}

/* ── White card wraps only the form — clean single-row search ── */
.zillow-hero .zillow-searchbar .tab-content {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 48px rgba(22, 30, 45, 0.28);
    padding: 7px;
    overflow: hidden;
}

/* Search form inner container */
.zillow-hero .zillow-searchbar .wd-find-select {
    border-radius: 10px;
    border: none;
}

.zillow-hero .zillow-searchbar .wd-find-select .inner-group {
    padding: 5px 6px 5px 18px !important;
    gap: 0;
    align-items: center;
    display: flex;
}

/* Hide field labels */
.zillow-hero .zillow-searchbar .wd-find-select .inner-group .form-style label {
    display: none !important;
}

/* ── Hide category "All" dropdown ── */
.zillow-hero .zillow-searchbar .form-search-category {
    display: none !important;
}

/* ── Hide "Advanced" filter link ── */
.zillow-hero .zillow-searchbar .filter-advanced {
    display: none !important;
}

/* ── Location input: expand to fill full available width ── */
.zillow-hero .zillow-searchbar .form-search-location {
    flex: 1 1 auto !important;
    min-width: 0;
    border-right: none !important;
}

/* Location text input */
.zillow-hero .zillow-searchbar .wd-find-select .inner-group .form-style .form-control {
    padding: 8px 40px 8px 14px !important;
    font-size: 15px !important;
    line-height: 22px !important;
    border-radius: 8px !important;
    border-color: transparent !important;
    background-color: transparent !important;
    width: 100% !important;
    box-shadow: none !important;
}
.zillow-hero .zillow-searchbar .wd-find-select .inner-group .form-style .form-control:focus {
    border-color: transparent !important;
    background-color: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Search button — Zillow-style prominent CTA ── */
.zillow-hero .zillow-searchbar .wd-find-select > button.tf-btn.primary,
.zillow-hero .zillow-searchbar .wd-find-select button[type="submit"].tf-btn {
    padding: 9px 28px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    align-self: center;
    flex-shrink: 0;
    border-radius: 10px !important;
    white-space: nowrap;
    line-height: 22px !important;
    letter-spacing: 0.3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.2s ease !important;
}
.zillow-hero .zillow-searchbar .wd-find-select > button.tf-btn.primary:hover,
.zillow-hero .zillow-searchbar .wd-find-select button[type="submit"].tf-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18) !important;
}

/* ── Responsive: tablet ── */
@media (max-width: 991px) {
    .zillow-hero .zillow-searchbar {
        max-width: 100%;
    }
}

/* ── Responsive: mobile ── */
@media (max-width: 575px) {
    .zillow-hero .zillow-searchbar .wd-find-select .inner-group {
        padding: 8px 8px 8px 14px !important;
        flex-wrap: wrap;
    }
    .zillow-hero .zillow-searchbar .wd-find-select > button.tf-btn.primary,
    .zillow-hero .zillow-searchbar .wd-find-select button[type="submit"].tf-btn {
        width: 100%;
        padding: 13px 20px !important;
    }
}


/* ============================================================
   3. RECOMMENDED FOR YOU — Zillow-style horizontal card carousel
   ============================================================ */

/* ── 1. Category tabs: hidden from UI (DOM + JS retained for AJAX filtering) ── */
.zillow-rfy-section .nav-tab-recommended.rfy-tabs-top {
    display: none !important;
}

/* ── Soft pill chip — inactive state ── */
.zillow-rfy-section .nav-tab-recommended .nav-link-item {
    background-color: transparent;
    color: #2d3748;
    border: 1.5px solid #d1d5db;
    border-radius: 50px;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.2px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease,
                border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ── Active / hover state ── */
.zillow-rfy-section .nav-tab-recommended .nav-link-item.active,
.zillow-rfy-section .nav-tab-recommended .nav-link-item:hover {
    background-color: var(--primary-color);
    color: #ffffff !important;
    border-color: var(--primary-color);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

/* ── 2. Heading + arrows in one flex row ── */
.rfy-heading-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: nowrap;
    margin-bottom: 18px;
    /* Match the Bootstrap col gutter (--bs-gutter-x: 20px → 10px each side)
       so the title left-edge and arrows right-edge align with the card content */
    padding-left: calc(var(--bs-gutter-x, 20px) / 2);
    padding-right: calc(var(--bs-gutter-x, 20px) / 2);
}
.rfy-heading-left {
    flex: 1 1 auto;
    min-width: 0;
}
.rfy-heading-left .section-title {
    margin-bottom: 0;
}

/* ── 3. Arrows bar (right side of heading row) ── */
.rfy-arrows-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Circle arrow buttons ── */
.rfy-arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid #d0d5dd;
    background: #ffffff;
    color: #344054;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 5px rgba(16, 24, 40, 0.08);
}
.rfy-arrow-btn:hover:not(:disabled) {
    background: #f4f6f8;
    border-color: #667085;
    box-shadow: 0 3px 12px rgba(16, 24, 40, 0.14);
}
.rfy-arrow-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}
.rfy-arrow-btn svg {
    display: block;
    pointer-events: none;
}

/* ── Parent containers must NOT clip horizontal overflow.
   animation:none on the wrapper prevents WOW.js transform stacking
   context which would silently block overflow-x scroll on children. ── */
.zillow-rfy-section .flat-tab-recommended {
    display: flow-root;         /* BFC: contains internal floats and child margins */
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
}
.zillow-rfy-section .tab-content,
.zillow-rfy-section .tab-pane {
    overflow: visible !important;
}

/* ── Carousel viewport: clips the sliding track; JS moves it via translateX ── */
.rfy-carousel-viewport {
    overflow: hidden;
    padding-bottom: 16px;           /* allow card box-shadows room at bottom */
    cursor: grab;                   /* visual affordance for drag/touchpad scroll */
    overscroll-behavior-x: contain; /* prevent horizontal scroll chaining to page */
    /* NO negative margin-bottom — was pulling the next section up and causing
       mobile overlap, especially with compact 28px section padding-bottom */
}
.rfy-carousel-viewport:active {
    cursor: grabbing;
}

/* ── Force Bootstrap row into single non-wrapping flex track ── */
.zillow-rfy-section [data-bb-toggle="properties-tab-slot"] .property-cards-row {
    flex-wrap: nowrap !important;
    --bs-gutter-x: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 4px;
    will-change: transform;
}

/* ── Cards: prevent shrinking; Bootstrap sets natural column width ── */
.zillow-rfy-section [data-bb-toggle="properties-tab-slot"] .property-cards-row > .col {
    flex: 0 0 auto !important;  /* override Bootstrap row-cols-1's flex shorthand */
    flex-shrink: 0 !important;
}


/* ============================================================
   3b. PREMIUM APARTMENTS — same horizontal carousel treatment
   ============================================================ */

/* Reuses all .rfy-* classes defined above. Only need row/col overrides scoped here. */
.zillow-pa-section .property-cards-row {
    flex-wrap: nowrap !important;
    --bs-gutter-x: 20px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-bottom: 4px;
    will-change: transform;
}
.zillow-pa-section .property-cards-row > .col {
    flex: 0 0 auto !important;  /* override Bootstrap row-cols-1's flex shorthand */
    flex-shrink: 0 !important;
}


/* ── Mobile carousel fixes: both RFY and PA ──────────────────────────────
   Bootstrap's row-cols-1 sets width:100% on each .col at xs breakpoint.
   On mobile this makes each card fill the full viewport, hiding all others
   behind overflow:hidden with no visible swipe affordance.
   Fix: override width to 78vw so ~1.25 cards are always visible.
   Also add touch-action:pan-y so browsers handle vertical scroll natively
   while our JS handles the horizontal drag.                               ── */
@media (max-width: 767px) {
    /* Viewport: allow touch-action pan-y so vertical page scroll still works */
    .rfy-carousel-viewport {
        touch-action: pan-y;
    }

    /* Track: explicitly force nowrap + reset gutter + drop GPU promotion on mobile */
    .zillow-rfy-section [data-bb-toggle="properties-tab-slot"] .property-cards-row,
    .zillow-pa-section .property-cards-row {
        flex-wrap: nowrap !important;
        display: flex !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        will-change: auto !important;   /* cancel GPU compositing layer on mobile */
    }

    /* Card: override row-cols-1's width:100% → 78vw shows ~1.25 cards */
    .zillow-rfy-section [data-bb-toggle="properties-tab-slot"] .property-cards-row > .col,
    .zillow-pa-section .property-cards-row > .col {
        flex: 0 0 auto !important;
        width: 78vw !important;
        min-width: 220px !important;
        max-width: 340px !important;
    }

    /* Hide arrows — touch-swipe handles navigation */
    .rfy-arrows-bar { display: none; }
}


/* ============================================================
   3c. PROPERTY CATEGORIES — “Try Searching For” arrows
   Repositioned to bottom-right of the swiper; styled to match
   the rfy-arrow-btn circles from the RFY carousel.
   ============================================================ */

/* ── Section shifts up so circles are exactly 50% inside hero / 50% outside ──
     Desktop circle diameter is 100px, so shift = -50px (exact half) so that:
         • The section's TOP is 50px inside the hero's bottom area
     • background-color: transparent — the dark hero bg shows through
       behind the upper halves of the circles
     • ::before pseudo-element paints the white bg starting at exactly
             50px from the section top (= hero-bottom boundary),
       so white sits behind circle bottom-halves and all content below   */
.flat-categories.zillow-cat-section {
    position: relative;
    z-index: 200;
        margin-top: -50px !important;
    padding-top: 0 !important;
    padding-bottom: 14px !important;
    background-color: transparent !important;
    overflow: visible;
}

/* White background layer — starts where the overlap ends */
.flat-categories.zillow-cat-section::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ffffff;
    z-index: -1;
}

/* ── Hide heading ── */
.zillow-cat-section .box-title {
    display: none !important;
}

.zillow-cat-section .wrap-categories {
    position: relative;
    z-index: 5;
    margin-top: 0;
    padding: 0 !important;
    overflow: visible;
}

/* Arrows hidden — Swiper JS nav bindings are kept in DOM so nothing breaks */
.zillow-cat-section .wrap-categories .box-navigation {
    display: none !important;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;              /* matches desktop circle diameter */
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    z-index: 10;
    margin: 0;
    padding: 0;
}

/* Override default theme .navigation styles to match rfy-arrow-btn */
.zillow-cat-section .box-navigation .navigation {
    pointer-events: auto;       /* parent has pointer-events:none — re-enable on buttons */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 1.5px solid #d0d5dd !important;
    background: #ffffff !important;
    color: #344054 !important;
    cursor: pointer;
    padding: 0 !important;
    box-shadow: 0 1px 5px rgba(16, 24, 40, 0.08);
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    /* Neutralise any inherited line-height / font-size from .navigation */
    line-height: 0;
    font-size: 0;
}
.zillow-cat-section .box-navigation .navigation i {
    font-size: 18px;
    line-height: 1;
    display: block;
}
.zillow-cat-section .box-navigation .navigation:hover {
    background: #f4f6f8 !important;
    border-color: #667085 !important;
    box-shadow: 0 3px 12px rgba(16, 24, 40, 0.14) !important;
    color: #344054 !important;  /* keep arrow icon dark — theme overrides this to white */
}
/* Theme sets .box-navigation .navigation:hover .icon { color: #fff } — override it */
.zillow-cat-section .box-navigation .navigation:hover .icon,
.zillow-cat-section .box-navigation .navigation:hover i {
    color: #344054 !important;
}




/* ============================================================
   3d. PROPERTY CATEGORIES — Circle styles
   ============================================================ */

/* ── Card wrapper: transparent, column-flex, circle on top ── */
.zillow-cat-section .homeya-categories {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 0 0 10px !important;
    gap: 2px;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* ── Suppress the full-card colour overlay pseudo-element ── */
.zillow-cat-section .homeya-categories::before {
    content: none !important;
}

/* ── Icon circle ── */
.zillow-cat-section .homeya-categories .icon-box {
    width: 100px !important;
    height: 100px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 2px solid #e8edf5 !important;
    box-shadow: 0 4px 20px rgba(16, 24, 40, 0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin: 0 auto !important;
    flex-shrink: 0;
    transition: background-color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.3s ease;
}

/* ── Icon / image / SVG inside the circle ── */
.zillow-cat-section .homeya-categories .icon-box .icon {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    font-size: 28px;
    color: #111827 !important;
    transition: color 0.3s ease, transform 0.3s ease;
}
.zillow-cat-section .homeya-categories .icon-box img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* ── Text block ── */
.zillow-cat-section .homeya-categories .content {
    text-align: center;
}
.zillow-cat-section .homeya-categories .content h6 {
    font-size: 17px;
    font-weight: 700;
    color: #1a202c !important;
    line-height: 1.2;
    margin-bottom: 0 !important;
    transition: color 0.25s ease;
}
.zillow-cat-section .homeya-categories .content p {
    font-size: 15px;
    line-height: 1.2;
    color: #667085 !important;
    margin-top: 0 !important;
    transition: color 0.25s ease;
}

/* ── Hover / active: lift circle, fill with primary, invert icon ── */
.zillow-cat-section .homeya-categories:hover .icon-box,
.zillow-cat-section .homeya-categories.active .icon-box {
    background-color: #000000 !important;
    border-color: #000000 !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
    transform: none;
}
.zillow-cat-section .homeya-categories:hover .icon-box .icon,
.zillow-cat-section .homeya-categories.active .icon-box .icon {
    color: var(--primary-color) !important;
    transform: scale(1.1);
}
.zillow-cat-section .homeya-categories:hover .icon-box img,
.zillow-cat-section .homeya-categories.active .icon-box img {
    transform: scale(1.08);
    filter: none;
}
.zillow-cat-section .homeya-categories:hover .content h6,
.zillow-cat-section .homeya-categories.active .content h6 {
    color: #1a202c !important;
}
.zillow-cat-section .homeya-categories:hover .content p,
.zillow-cat-section .homeya-categories.active .content p {
    color: #4a5568 !important;
}

/* ── Tablet ≤ 991px ── */
@media (max-width: 991px) {
    .flat-categories.zillow-cat-section {
        margin-top: -45px !important;
        padding-bottom: 12px !important;
    }
    .flat-categories.zillow-cat-section::before {
        top: 45px;
    }
    .zillow-cat-section .wrap-categories .box-navigation {
        height: 90px;  /* match tablet circle size */
    }
    .zillow-cat-section .homeya-categories .icon-box {
        width: 90px !important;
        height: 90px !important;
    }
    .zillow-cat-section .homeya-categories .icon-box .icon {
        width: 28px !important;
        height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 24px;
    }
    .zillow-cat-section .homeya-categories .icon-box img {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
    }
}

/* ── Mobile ≤ 575px ── */
@media (max-width: 575px) {
    .flat-categories.zillow-cat-section {
        margin-top: -38px !important;
        padding-bottom: 10px !important;
    }
    .flat-categories.zillow-cat-section::before {
        top: 38px;
    }
    .zillow-cat-section .wrap-categories {
        padding: 0 !important;  /* no arrows on mobile — remove side padding */
    }
    .zillow-cat-section .box-navigation {
        display: none !important;
    }
    .zillow-cat-section .homeya-categories .icon-box {
        width: 76px !important;
        height: 76px !important;
    }
    .zillow-cat-section .homeya-categories .icon-box .icon {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
        font-size: 20px;
    }
    .zillow-cat-section .homeya-categories .icon-box img {
        width: 26px !important;
        height: 26px !important;
        max-width: 26px !important;
        max-height: 26px !important;
    }
}


/* ============================================================
   4. EXPLORE CITIES / LOCATION — Grid cards with hover lift
   ============================================================ */

.zillow-location-section {
    background-color: #f7f9fc !important;
}

/* Card hover lift & shadow */
.zillow-location-section .box-location {
    box-shadow: 0 2px 14px rgba(22, 30, 45, 0.09);
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    border-radius: 14px !important;
}

/* Fixed image height with cover for consistent grid look */
.zillow-location-section .box-location .image img {
    height: 200px;
    object-fit: cover;
    width: 100%;
    transition: transform 0.4s ease;
    border-radius: 14px !important;
}

/* Hover: card lifts, image zooms gently */
.zillow-location-section .box-location:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 32px rgba(22, 30, 45, 0.16);
}

.zillow-location-section .box-location:hover .image img {
    transform: scale(1.06);
}

/* City name label styling */
.zillow-location-section .box-location .content .title {
    font-size: 15px;
    font-weight: 700;
}


/* ============================================================
   4. SERVICES / HOW-IT-WORKS — Numbered step cards
   ============================================================ */

.zillow-services-section {
    background-color: #ffffff;
}

/* Override the default flex layout with a CSS grid for even 3-column cards */
.zillow-services-section .wrap-service {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

@media (max-width: 991px) {
    .zillow-services-section .wrap-service {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .zillow-services-section .wrap-service {
        grid-template-columns: 1fr;
    }
}

/* Individual service card */
.zillow-services-section .zillow-service-card {
    position: relative;
    background: #f7f9fc;
    border-radius: 16px;
    padding: 32px 28px 28px;
    border: 1.5px solid #e8edf2;
    flex-direction: column;
    gap: 20px;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.zillow-services-section .zillow-service-card:hover {
    box-shadow: 0 8px 32px rgba(22, 30, 45, 0.11);
    transform: translateY(-3px);
    border-color: var(--primary-color);
}

/* Large decorative step number — top-right corner, very light */
.zillow-step-number {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 3.2rem;
    font-weight: 900;
    color: #e4e9ef;
    line-height: 1;
    letter-spacing: -1px;
    pointer-events: none;
    user-select: none;
    transition: color 0.25s ease;
    font-family: var(--heading-font, inherit);
}

.zillow-services-section .zillow-service-card:hover .zillow-step-number {
    color: rgba(22, 30, 45, 0.06);
}

/* Icon box: white elevated mini-card */
.zillow-services-section .zillow-service-card .icon-box {
    width: 56px;
    height: 56px;
    background: #ffffff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(22, 30, 45, 0.09);
    flex-shrink: 0;
}

/* Service card title */
.zillow-services-section .zillow-service-card .content .title {
    font-size: 17px;
    font-weight: 700;
    color: #161e2d;
    margin-bottom: 8px;
}

/* Service card description */
.zillow-services-section .zillow-service-card .content .description {
    font-size: 14px;
    line-height: 1.65;
    color: #5c6368;
}

/* ── Stats / Counters Bar ──────────────────────────────── */

/* Replace plain counter strip with a full-width gradient bar */
.zillow-services-section .flat-counter.wrap-counter {
    margin-top: 48px;
    background: linear-gradient(89.9deg, #0f4e98 0.07%, #ee6742 99.9%);
    border-radius: 16px;
    padding: 36px 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: 100%;
}

@media (max-width: 767px) {
    .zillow-services-section .flat-counter.wrap-counter {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 20px;
        gap: 16px 0;
    }
}

.zillow-services-section .flat-counter.wrap-counter .counter-box {
    text-align: center;
    padding: 0 20px;
    position: relative;
}

/* Subtle vertical divider between counters */
.zillow-services-section .flat-counter.wrap-counter .counter-box:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: rgba(255, 255, 255, 0.25);
}

@media (max-width: 767px) {
    .zillow-services-section .flat-counter.wrap-counter .counter-box:not(:last-child)::after {
        display: none;
    }
}

/* Counter number */
.zillow-services-section .flat-counter.wrap-counter .counter-box .count-number .number {
    font-size: 2.4rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
}

/* Counter label */
.zillow-services-section .flat-counter.wrap-counter .counter-box .title-count {
    color: rgba(255, 255, 255, 0.82);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-top: 10px;
}


/* ============================================================
   5. TESTIMONIALS — Flat white cards with visible star ratings
   ============================================================ */

.zillow-testimonials-section {
    background-color: #f7f9fc !important;
}

/* Override the default 0.4 opacity on non-active slides —
   all cards visible at full opacity for a cleaner grid look */
.zillow-testimonials-section .flat-testimonial .swiper-slide .box-tes-item {
    opacity: 1 !important;
}

/* Card styling */
.zillow-testimonials-section .box-tes-item {
    background: #ffffff;
    border-radius: 14px;
    padding: 26px 22px;
    border: 1.5px solid #e8edf2;
    box-shadow: 0 2px 12px rgba(22, 30, 45, 0.06);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.zillow-testimonials-section .box-tes-item:hover {
    box-shadow: 0 8px 28px rgba(22, 30, 45, 0.12);
    transform: translateY(-3px);
}

/* Stars — make them prominent and golden */
.zillow-testimonials-section .list-star {
    margin-bottom: 14px;
}

.zillow-testimonials-section .list-star li {
    color: #f4d118;
    font-size: 13px;
}

/* Review text */
.zillow-testimonials-section .note {
    font-size: 14px;
    line-height: 1.7;
    color: #5c6368;
    margin-bottom: 18px;
}

/* Reviewer info divider */
.zillow-testimonials-section .box-avt {
    border-top: 1px solid #e8edf2;
    padding-top: 14px;
    margin-top: 4px;
}

/* Navigation arrow buttons */
.zillow-testimonials-section .box-navigation {
    margin-top: 24px;
}

.zillow-testimonials-section .navigation {
    border: 1.5px solid #e8edf2;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.22s ease;
}

.zillow-testimonials-section .navigation:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}


/* ============================================================
   6. CTA BANNER — Bold gradient background, white text + button
   ============================================================ */

.zillow-cta-banner .wrap-banner {
    background: linear-gradient(89.9deg, #0f4e98 0.07%, #ee6742 99.9%) !important;
    border-radius: 20px;
}

/* Reset box-left padding (was 60px 20px 60px 80px) */
.zillow-cta-banner .wrap-banner .box-left {
    padding: 52px 24px 52px 64px !important;
}

@media (max-width: 991px) {
    .zillow-cta-banner .wrap-banner .box-left {
        padding: 40px 20px 40px 40px !important;
    }
}

@media (max-width: 767px) {
    .zillow-cta-banner .wrap-banner .box-left {
        padding: 36px 28px !important;
        text-align: center;
    }
}

/* Subtitle label */
.zillow-cta-banner .wrap-banner .text-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 12px;
}

/* Section title */
.zillow-cta-banner .wrap-banner .section-title {
    color: #ffffff !important;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
}

/* CTA button — white filled, brand-colored text */
.zillow-cta-banner .wrap-banner .tf-btn.primary {
    background: #ffffff !important;
    color: #0f4e98 !important;
    border: 2px solid #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700;
    padding: 12px 32px;
    transition: all 0.25s ease;
    margin-top: 28px !important;
}

.zillow-cta-banner .wrap-banner .tf-btn.primary:hover {
    background: transparent !important;
    color: #ffffff !important;
}

/* Right image */
.zillow-cta-banner .wrap-banner .box-right img {
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(11, 33, 50, 0.22);
    margin-top: 0 !important;
}


/* ============================================================
   7. COMPACT SECTION SPACING — all homepage sections
   Zillow reference: ~40–48 px per section side (desktop).
   New coverage vs. previous version:
     + .flat-categories       (Property Categories shortcode)
     + .featured-premium-section (Featured Premium Properties)
     + .flat-latest-new / -v2    (Blog Posts shortcode)
   ============================================================ */

/* ── Section vertical padding: desktop ≥ 992px ───────────────
   Baseline values before these overrides:
     .flat-section      = 100px 0
     .flat-section-v3   =  80px 0
     .flat-section-v5   = 120px top / 80px bottom
   Zillow target        =  40–44 px each side                 */

/* Primary property / feature sections */
.zillow-rfy-section,
.zillow-pa-section,
.zillow-services-section,
.featured-premium-section {
    padding-top:    36px !important;
    padding-bottom: 36px !important;
}

/* Reduce only the top spacing of RFY to close the gap under category circles */
.zillow-rfy-section {
    padding-top: 24px !important;
}

/* Neutralise the theme’s .flat-recommended-v2 negative pull:
   Theme sets margin-top:-400px + padding-top:410px so PA overlaps the preceding
   section (designed for hero-to-PA layout). Our padding-top override already
   changes 410px → 44px with !important, but without cancelling the -400px
   margin the PA section is still pulled 356px up into RFY. */
.zillow-pa-section {
    margin-top: 0 !important;
}

/* Supporting / secondary sections */
.zillow-location-section,
.zillow-testimonials-section,
.flat-latest-new,
.flat-latest-new-v2 {
    padding-top:    32px !important;
    padding-bottom: 32px !important;
}

/* CTA: theme adds pt-0 already — only override bottom */
.zillow-cta-banner {
    padding-bottom: 36px !important;
}


/* ── Section heading blocks (.box-title) ──────────────────────
   Theme: 40–50 px bottom margin → 20 px                     */

.zillow-rfy-section .box-title,
.zillow-pa-section .box-title,
.zillow-location-section .box-title,
.zillow-services-section .box-title,
.zillow-testimonials-section .box-title,
.featured-premium-section .box-title,
.flat-latest-new .box-title,
.flat-latest-new-v2 .box-title {
    margin-bottom: 16px !important;
}

/* Bootstrap .mt-4 on <h2> (24 px) → tighten to 6 px */
.zillow-rfy-section .box-title .section-title,
.zillow-pa-section .box-title .section-title,
.zillow-location-section .box-title .section-title,
.zillow-services-section .box-title .section-title,
.zillow-testimonials-section .box-title .section-title,
.featured-premium-section .box-title .section-title,
.flat-latest-new .box-title .section-title {
    margin-top: 6px !important;
}

/* RFY / PA "View All Properties" button — reduce top gap */
.zillow-rfy-section .tf-btn,
.zillow-pa-section .tf-btn {
    margin-top: 20px !important;
}

/* Pill chips compact on smaller screens */
.zillow-rfy-section .nav-tab-recommended .nav-link-item {
    padding: 7px 18px;
    font-size: 13px;
}

/* Carousel heading + arrows row */
.rfy-heading-row {
    margin-bottom: 14px;
}

/* Stats / counters gradient bar top gap */
.zillow-services-section .flat-counter.wrap-counter {
    margin-top: 16px;
}

/* Service card grid gap */
.zillow-services-section .wrap-service {
    gap: 14px;
}


/* ── Tablet: ≤ 991px ─────────────────────────────────────── */
@media (max-width: 991px) {
    .zillow-rfy-section,
    .zillow-pa-section,
    .zillow-services-section,
    .featured-premium-section {
        padding-top:    26px !important;
        padding-bottom: 26px !important;
    }

    .zillow-rfy-section {
        padding-top: 18px !important;
    }

    .zillow-location-section,
    .zillow-testimonials-section,
    .flat-latest-new,
    .flat-latest-new-v2 {
        padding-top:    22px !important;
        padding-bottom: 22px !important;
    }

    .zillow-cta-banner {
        padding-bottom: 26px !important;
    }

    .zillow-rfy-section .box-title,
    .zillow-pa-section .box-title,
    .zillow-location-section .box-title,
    .zillow-services-section .box-title,
    .zillow-testimonials-section .box-title,
    .featured-premium-section .box-title,
    .flat-latest-new .box-title {
        margin-bottom: 14px !important;
    }

    .zillow-services-section .flat-counter.wrap-counter {
        margin-top: 14px;
    }

    .zillow-services-section .wrap-service {
        gap: 12px;
    }
}


/* ── Mobile: ≤ 575px ─────────────────────────────────────── */
@media (max-width: 575px) {
    .zillow-rfy-section,
    .zillow-pa-section,
    .zillow-services-section,
    .featured-premium-section {
        padding-top:    22px !important;
        padding-bottom: 22px !important;
    }

    .zillow-rfy-section {
        padding-top: 14px !important;
    }

    .zillow-location-section,
    .zillow-testimonials-section,
    .flat-latest-new,
    .flat-latest-new-v2 {
        padding-top:    20px !important;
        padding-bottom: 20px !important;
    }

    .zillow-cta-banner {
        padding-bottom: 20px !important;
    }

    .zillow-rfy-section .box-title,
    .zillow-pa-section .box-title,
    .zillow-location-section .box-title,
    .zillow-services-section .box-title,
    .zillow-testimonials-section .box-title,
    .featured-premium-section .box-title,
    .flat-latest-new .box-title {
        margin-bottom: 12px !important;
    }

    .zillow-rfy-section .tf-btn,
    .zillow-pa-section .tf-btn {
        margin-top: 16px !important;
    }

    .zillow-services-section .flat-counter.wrap-counter {
        margin-top: 12px;
    }
}