/*
 * Homepage rebuild - shared-framework version of resources/views/new.blade.php
 * (the standalone Divi homepage). Scoped under .hp-rebuild so nothing here can
 * bleed into the rest of the site, which layouts.app already serves cleanly.
 *
 * Real colors/fonts extracted directly from new.blade.php's source (not
 * guessed from screenshots alone) - see the homepage-framework-question
 * memory / session notes for exactly where each value came from:
 *   - Hero background:        #C2DDDF
 *   - Heading color:           #333
 *   - Body text color:         #666
 *   - Button:                  bg #ebc50f, border/text #0d6282
 *   - Button hover:             bg #5ba4aa, text #fff
 *   - Headline font:           "Moonshine" (the real generic h1-h6 rule in
 *                               new.blade.php) - the original also used
 *                               regular "Kollectif" for hero slide titles
 *                               specifically and varied font-size per
 *                               section/module, but per explicit feedback
 *                               ("make sure all the text and headings on
 *                               the page are unified") this rebuild uses
 *                               ONE consistent heading/body system across
 *                               every section instead of reproducing that
 *                               per-module variance. "Kollectif Bold" is
 *                               declared as a @font-face in the original
 *                               but never actually assigned to any element -
 *                               confirmed by grep, not assumed - so it's
 *                               not used here either.
 *   - Body font:                Century Gothic, falls back to Helvetica/Arial
 *
 * Unified type scale (applies to every section below - do not add
 * section-specific font-family/font-size/color overrides for headings
 * or body text; only layout properties like margin belong per-section):
 *   h2 (section headlines): 42px / 32px mobile, Moonshine, uppercase, 700
 *   h4 (card sub-headings):  20px, Moonshine, uppercase, 700
 *   body copy (p, li, etc.): 16px, Century Gothic, #666, line-height 1.8
 */

@font-face {
    font-family: "Kollectif";
    font-display: swap;
    src: url("/front/wp-content/uploads/et-fonts/Kollektif.ttf") format("truetype");
}

@font-face {
    font-family: "Moonshine";
    font-display: swap;
    src: url("/front/wp-content/uploads/et-fonts/Moonshine-Regular.otf") format("opentype");
}

.hp-rebuild {
    color: #666;
    font-family: "Century Gothic", Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    line-height: 1.8;
    overflow-x: hidden;
}

/*
 * For the "Pricing & Plans" nav/footer links jumping to #pricing -
 * smooth scroll, plus scroll-margin-top so the sticky header (see
 * layouts.app's .header.header-shadow) doesn't cover the top of the
 * section when landed on. Scoped to this page's own stylesheet since
 * the anchor target only exists here.
 */
html {
    scroll-behavior: smooth;
}

#pricing {
    scroll-margin-top: 90px;
}

.hp-rebuild h1,
.hp-rebuild h2,
.hp-rebuild h3,
.hp-rebuild h4 {
    color: #333;
    font-family: "Moonshine", Helvetica, Arial, Lucida, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 1.2;
}

.hp-rebuild h2 {
    font-size: 42px;
    margin-bottom: 24px;
}

.hp-rebuild h4 {
    font-size: 20px;
    margin-bottom: 8px;
}

@media (max-width: 991px) {
    .hp-rebuild h2 {
        font-size: 32px;
    }
}

/*
 * Not in the original page (its buttons are flat, confirmed via grep -
 * no box-shadow on .et_pb_button anywhere) - a deliberate enhancement
 * requested on top of the faithful rebuild. Same soft colored glow
 * treatment as .hp-card-icon's medallions (per feedback: "that's
 * exactly what I want behind the buttons"), not a drop shadow - a
 * wide, blurred glow in the button's own color rather than a dark
 * shadow implying elevation.
 */
.hp-btn {
    display: inline-block;
    background-color: #ebc50f;
    border: 2px solid #0d6282;
    color: #0d6282;
    font-family: "Century Gothic", Helvetica, Arial, Lucida, sans-serif;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0 0 25px 8px rgba(101, 163, 169, .18);
    transition: background-color .3s ease, border-color .3s ease, color .3s ease, box-shadow .15s ease;
}

.hp-btn:hover {
    background-color: #5ba4aa;
    border-color: #5ba4aa;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 0 25px 8px rgba(101, 163, 169, .25);
}

/* ===== Hero ===== */

.hp-hero {
    position: relative;
    background-color: #C2DDDF;
    padding-top: 40px;
    padding-bottom: 120px;
    overflow: hidden;
}

/*
 * IMPORTANT: don't set `display` unconditionally on `.carousel-item` here -
 * Bootstrap's own CSS hides inactive slides via `display: none` and only
 * shows `.active`/`.carousel-item-next`/`.carousel-item-prev` as
 * `display: block` (see bootstrap.min.css). Overriding `.carousel-item`
 * itself (rather than matching that same selector list) makes every slide
 * visible at once, which is exactly the "all sections stacked" bug this
 * fixed - confirmed against the real bootstrap.min.css selectors, not
 * guessed.
 *
 * Fixed `height` (not `min-height`) on purpose: the 4 slide images have
 * different native aspect ratios (1080x977, 1080x753, 1080x798,
 * 1080x955) and headline/subtext lengths also differ - with min-height,
 * whichever slide's content happened to be tallest would stretch the
 * whole section for that slide only, shifting the .hp-hero-wave
 * (anchored to the section's bottom edge) up/down between slides. A
 * fixed height + overflow: hidden guarantees every slide occupies
 * identical space, so the wave never moves.
 */
.hp-hero-carousel .carousel-item {
    height: 400px;
    overflow: hidden;
}

.hp-hero-carousel .carousel-item.active,
.hp-hero-carousel .carousel-item-next,
.hp-hero-carousel .carousel-item-prev {
    display: flex;
    align-items: center;
}

/*
 * .hp-hero-image/.hp-hero-text are absolutely positioned within
 * .hp-hero-slide rather than sitting in a flex/grid row together - on
 * purpose, per feedback that the text must sit at a fixed horizontal
 * spot "regardless of the graphic size or position." Bootstrap grid
 * columns are already content-independent in practice, but absolute
 * positioning removes any possible doubt: .hp-hero-text's `left` is a
 * fixed percentage of .hp-hero-slide with zero relationship to
 * .hp-hero-image's box, size, or content.
 */
.hp-hero-slide {
    position: relative;
    height: 100%;
}

.hp-hero-image {
    position: absolute;
    left: 0;
    top: 0;
    width: 41.6666%;
    height: 100%;
    overflow: hidden;
    /* Hidden by default (not just relying on the animation's backwards
       fill-mode below) - see the matching note on .hp-hero-text for
       why: without an explicit base opacity, there's a brief flash of
       the un-animated (fully visible) state right when a slide
       becomes .active, before the animation engine catches up. */
    opacity: 0;
}

.hp-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Crop from the bottom, not the top - anchoring to top keeps each
       illustration's head/upper detail fully visible regardless of the
       box's aspect ratio. */
    object-position: top;
}

.hp-hero-title {
    /* Typography (font/size/weight/color) comes from the unified
       .hp-rebuild h2 rule above - only this section's own spacing
       lives here. */
    margin-bottom: 20px;
}

.hp-hero-subtext {
    margin-bottom: 30px;
}

.hp-hero-text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%);
    width: 45%;
    /* Hidden by default - see the note on .hp-hero-image above: a
       brief flash of the fully-visible, un-animated state was showing
       right when a slide became .active, before this animation
       "caught up" and jumped it back to hidden - confirmed a real bug,
       not assumed. Relying only on the animation's own backwards
       fill-mode wasn't enough to prevent it. */
    opacity: 0;
}

/*
 * Real animation pulled directly from the original (@keyframes
 * fadeBottom, applied to .et_pb_slide_description via
 * .et-pb-active-slide) - exact same opacity/translateY values,
 * duration, delay, and easing. Combined with the existing
 * translateY(-50%) vertical-centering transform above (can't just
 * replace it - the animation's own transform would otherwise fight
 * the centering). Same treatment now applied to .hp-hero-image too
 * (a deliberate enhancement beyond the original, which only animates
 * the text) - no transform conflict there since the image has none of
 * its own.
 */
@keyframes hpHeroTextFadeIn {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(-50%) translateY(0);
    }
}

@keyframes hpHeroImageFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.hp-hero-carousel .carousel-item.active .hp-hero-text {
    animation: hpHeroTextFadeIn 1s ease-in-out both;
}

.hp-hero-carousel .carousel-item.active .hp-hero-image {
    animation: hpHeroImageFadeIn 1s ease-in-out both;
}

/*
 * Positioned relative to .hp-hero (the full-width section, position:
 * relative above) rather than left inside Bootstrap's default - which
 * anchors to the nearest positioned ancestor, in this case the inner
 * .container - putting them right against the slide image/text columns.
 * Anchoring to the section itself keeps them at the true edges of the
 * hero, clear of the content regardless of viewport width.
 */
.hp-hero-control {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 5;
    width: 60px;
    opacity: .5;
}

.hp-hero-control.carousel-control-prev {
    left: 15px;
}

.hp-hero-control.carousel-control-next {
    right: 15px;
}

.hp-hero-control:hover {
    opacity: .9;
}

.hp-hero-control .carousel-control-prev-icon,
.hp-hero-control .carousel-control-next-icon {
    filter: invert(30%);
}

@media (max-width: 767px) {
    .hp-hero-control {
        width: 36px;
    }
}

.hp-hero-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMjBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNGRkZGRkYiPjxwYXRoIGQ9Ik0zMjAgMjhDMTYwIDI4IDgwIDQ5IDAgNzBWMGgxMjgwdjcwYy04MCAyMS0xNjAgNDItMzIwIDQyLTMyMCAwLTMyMC04NC02NDAtODR6Ii8+PC9nPjwvc3ZnPg==");
    background-size: 100% 120px;
    background-repeat: no-repeat;
    transform: scale(-1, -1);
}

@media (max-width: 991px) {
    /* Image+text stack vertically on mobile - the fixed desktop height
       would clip the text below the image, so let the slide grow to
       fit instead (the wave-stability concern doesn't apply here since
       .hp-hero-wave is hidden behind stacked content anyway on small
       screens, not visibly shifting next to it). Also drop the
       absolute positioning used on desktop to keep text pinned to a
       fixed horizontal spot - that only makes sense side-by-side; on a
       single stacked column it needs to flow normally instead. */
    .hp-hero-carousel .carousel-item {
        height: auto;
        overflow: visible;
    }

    .hp-hero-slide {
        height: auto;
    }

    .hp-hero-image {
        position: static;
        width: 100%;
        height: 180px;
    }

    .hp-hero-text {
        position: static;
        transform: none;
        width: 100%;
        text-align: center;
        margin-top: 24px;
    }

    /* Mobile drops the translateY(-50%) centering above, so the fade-in
       keyframe's baked-in offset would fight `transform: none` here -
       use a plain version without it instead. */
    .hp-hero-carousel .carousel-item.active .hp-hero-text {
        animation-name: hpHeroTextFadeInMobile;
    }
}

@keyframes hpHeroTextFadeInMobile {
    0% {
        opacity: 0;
        transform: translateY(10%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Intro ("Get a Memorable Number") ===== */

.hp-intro {
    position: relative;
    background-color: #fff;
    padding: 50px 0;
}

/*
 * Sits outside .container so it can reach the section's true left
 * edge (flush against the viewport, not inset by the container's
 * gutters). Spans the section's full height via `top:0; bottom:0`
 * rather than `height:100%` - .hp-intro's own height is driven by its
 * in-flow text content (auto, not an explicit value), and an
 * absolutely positioned child's `height:100%` only resolves reliably
 * against a containing block with a *definite* height; `top`+`bottom`
 * stretches correctly even when the containing block's height is
 * auto/content-driven, which is the actual case here.
 */
.hp-intro-image {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 38%;
    overflow: hidden;
}

.hp-intro-image img {
    /* contain, not cover - per feedback, this image must never be
       cropped. It'll letterbox (empty space above/below or side to
       side) if the box's aspect ratio doesn't match the image's, but
       the full image always stays visible. object-position: left
       keeps that empty space on the right only - contain's default
       "center" was leaving a gap on the left too, which is what made
       the image stop looking flush against the section's left edge
       even though the box itself never moved. */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left;
}

.hp-intro h2 {
    /* Typography comes from the unified .hp-rebuild h2 rule - only this
       section's own spacing lives here. */
    margin-bottom: 25px;
}

/*
 * The original used 'Open Sans' specifically for this section's
 * paragraph/bullets (.et_pb_text_1/.et_pb_text_2), different from most
 * other body text there - but per the unified-typography request, this
 * rebuild intentionally does NOT reproduce that inconsistency. Body
 * copy here inherits the shared .hp-rebuild font/size/color; only
 * layout (list markers/spacing) is section-specific.
 */
.hp-intro-bullets {
    /* The shared layout's main.css resets `ul, ol { list-style-type:
       none }` site-wide - explicitly restoring disc bullets here,
       since that reset otherwise silently suppresses them. */
    list-style-type: disc;
    padding-left: 20px;
    margin-bottom: 30px;
}

.hp-intro-bullets li {
    display: list-item;
}

@media (max-width: 991px) {
    /* Drop the absolute/edge-to-edge positioning on mobile - the image
       stacks above the text as a normal full-width block instead. */
    .hp-intro-image {
        position: static;
        width: 100%;
        height: 220px;
        margin-bottom: 30px;
    }
}

/* ===== 3 service cards + company story ===== */

.hp-cards {
    background-color: rgb(252, 250, 247);
    padding: 50px 0;
}

.hp-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-decoration: none;
    margin-bottom: 30px;
}

.hp-card:last-child {
    margin-bottom: 0;
}

/*
 * Circular medallion - the source PNGs (PARK-AND-PAY-Symbol-cropped.png,
 * doc-icon2.png, SELL-LICENSE-Symbol-cropped.png) are flat gold/orange
 * glyphs on a transparent background, no circle baked in (confirmed by
 * opening them directly) - the colored circle + glow is built here in
 * CSS, colors sampled directly from the reference screenshot's real
 * pixels: #246181 (Park and Pay), #65a3a9 (Buy/Lease and Sell/License -
 * confirmed identical by sampling both, not just visually similar).
 */
.hp-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hp-card-icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.hp-card p {
    /* Typography comes from the unified .hp-rebuild body style - only
       this section's own spacing (no bottom margin, tight card
       layout) lives here. */
    margin: 0;
}

.hp-story-image {
    text-align: center;
}

.hp-story-image img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    .hp-story-image {
        margin: 30px 0;
    }
}

/*
 * ===== Park and Pay callout =====
 * The wave shape at the bottom couldn't be pulled from new.blade.php's
 * source directly - unlike the hero divider (section_0), this section's
 * (section_3) divider SVG isn't present anywhere in new.blade.php or its
 * loaded CSS files (confirmed by grep across the whole file and the
 * dynamic CSS cache) - it must ship as a built-in Divi theme asset
 * referenced some other way. Reconstructed instead from the reference
 * screenshot itself: sampled real pixel colors (section bg
 * rgb(252,250,247), wave fill rgb(239,249,255)) and traced the actual
 * curve boundary at 19 x-positions across the image to build a
 * matching SVG path, rather than guessing the shape freehand.
 */
.hp-park {
    position: relative;
    background-color: rgb(252, 250, 247);
    padding: 60px 0 0;
    min-height: 500px;
    overflow: hidden;
}

.hp-park .container {
    position: relative;
    z-index: 2;
}

/*
 * Sits outside .container, anchored to the section's true right edge
 * (flush against the viewport) - the same treatment as the intro
 * image's left placement, and for the same reason: `top`/`bottom`
 * instead of `height:100%` since .hp-park's height comes from its own
 * min-height rather than a value an absolutely positioned child could
 * reliably read via a percentage.
 */
.hp-park-image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48%;
    /* Higher than .hp-park-wave's z-index: 1 - it comes later in the
       DOM, so at equal z-index it would otherwise paint over (and
       cover the bottom of) this image. */
    z-index: 3;
}

.hp-park-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

.hp-park-wave {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 320px;
    z-index: 1;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIzMjAiIHZpZXdCb3g9IjAgMCAxMDAwIDMwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsPSIjRUZGOUZGIiBkPSJNMCw4OSBDMTMwLDExMCAyNjAsMTUwIDM4MCwyMDUgQzQzMCwyMjIgNDYwLDIyOCA1MDAsMjI5IEM2MDAsMjMxIDY4MCwyMjAgNzYwLDE5NSBDODUwLDE2NSA5MzAsMTUwIDEwMDAsMTYwIEwxMDAwLDMwMCBMMCwzMDAgWiIvPjwvc3ZnPg==");
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

@media (max-width: 991px) {
    /* Drop the edge-to-edge absolute positioning on mobile - stacks
       below the text as a normal full-width block instead. */
    .hp-park {
        min-height: 0;
    }

    .hp-park-image {
        position: static;
        width: 100%;
        height: 220px;
        margin-top: 30px;
    }
}

/*
 * ===== Pricing table =====
 * Real colors sampled directly from the reference screenshot's pixels:
 * section bg #EFF9FF (the same blue the Park and Pay wave transitions
 * into), eyebrow label #F6931D, Bronze #65a3a9/Silver #246181 (both
 * the same colors already used for the card medallions - confirmed
 * consistent branding, not a coincidence), Gold #deb120, all 3 button
 * labels white text regardless of tier color (confirmed by sampling
 * the gold button's text too, not assumed).
 *
 * The original's h2/h3 tag choice here is backwards from every other
 * section (h2 = the small eyebrow label, h3 = the actual big
 * headline) - reproducing that would fight the unified h2 = "section
 * headline" rule established above, so the eyebrow is a plain <span>
 * here instead and the real headline is the <h2>.
 */
.hp-pricing {
    background-color: #EFF9FF;
    padding: 60px 0;
}

.hp-pricing-header {
    margin-bottom: 40px;
}

.hp-eyebrow {
    display: block;
    color: #F6931D;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 14px;
    margin-bottom: 10px;
}

.hp-pricing-card {
    background-color: #fff;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
}

.hp-pricing-card-header {
    padding: 18px 25px;
}

.hp-pricing-card-header h4 {
    color: #fff;
    margin-bottom: 0;
}

.hp-pricing-card-body {
    padding: 25px;
}

.hp-pricing-price {
    font-size: 42px;
    font-weight: 700;
    color: #333;
    margin-bottom: 20px;
}

.hp-pricing-dollar {
    font-size: 20px;
    vertical-align: top;
    position: relative;
    top: 8px;
}

.hp-pricing-freq {
    font-size: 15px;
    font-weight: 400;
    color: #999;
}

.hp-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px;
}

.hp-pricing-features li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 12px;
}

.hp-pricing-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--tier-color, #666);
}

.hp-pricing-btn {
    display: block;
    text-align: center;
    color: #fff;
}

/*
 * ===== Testimonials =====
 * Real values, all confirmed from the actual source rather than
 * sampled/guessed (unlike the Park and Pay wave, this section's real
 * CSS and asset DID turn up in the deferred CSS cache file):
 *   - Section background:  #f7f8fc (also given directly by the user -
 *     matches exactly)
 *   - "Quotation mark" graphic: a real asset,
 *     front/wp-content/uploads/2024/04/insurance-02.png (a large,
 *     faint double-quote-mark graphic - confirmed by opening the file
 *     directly, not assumed from its filename), applied as the
 *     section's own background-image, positioned right/center,
 *     natural size, no-repeat.
 *   - Top/bottom divider shapes: the exact real SVG path Divi uses
 *     here (not reconstructed from a screenshot) - same path for both,
 *     top filled #eef9ff (matching the pricing section above it),
 *     bottom filled #0d6282 (the site's real dark teal, matching the
 *     CTA section below it).
 *   - Underline rule beneath "Our Customers": #366CF2, sampled from
 *     the reference screenshot.
 */
.hp-testimonials {
    position: relative;
    background-color: #f7f8fc;
    background-image: url("/front/wp-content/uploads/2024/04/insurance-02.png");
    background-position: right center;
    background-repeat: no-repeat;
    padding: 80px 0 120px;
    overflow: hidden;
}

.hp-testimonials-header {
    position: relative;
    z-index: 2;
    margin-bottom: 40px;
}

.hp-testimonials-rule {
    display: inline-block;
    width: 80px;
    height: 3px;
    background-color: #366CF2;
}

.hp-testimonial {
    position: relative;
    z-index: 2;
    text-align: center;
    font-style: italic;
    color: #888;
}

.hp-testimonial-featured {
    margin-bottom: 20px;
    font-size: 19px;
}

.hp-testimonials-top-divider,
.hp-testimonials-bottom-divider {
    position: absolute;
    left: 0;
    right: 0;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/*
 * Same SVG path as the bottom divider (preserveAspectRatio="none"),
 * but at a much shorter height - since the path is stretched
 * non-uniformly to fill whatever box height it's given, a shorter box
 * flattens the same curve into the subtle, barely-there transition
 * shown in the reference screenshot (a much gentler slope than the
 * bottom divider's more pronounced cut into the dark CTA section).
 */
.hp-testimonials-top-divider {
    top: 0;
    height: 35px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiNlZWY5ZmYiPjxwYXRoIGQ9Ik0xMDkzLjQ4IDEzMS44NUwxNzMgOTRhNzYuODUgNzYuODUgMCAwIDEtMzYuNzktMTEuNDZMMCAwdjE0MGgxMjgwVjBsLTEzMS44MSAxMTEuNjhjLTE2LjQ3IDEzLjk2LTM1LjQ3IDIwLjk2LTU0LjcxIDIwLjE3eiIvPjwvZz48L3N2Zz4=");
}

.hp-testimonials-bottom-divider {
    bottom: 0;
    height: 90px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxNDBweCIgdmlld0JveD0iMCAwIDEyODAgMTQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9IiMwRDYyODIiPjxwYXRoIGQ9Ik0xMDkzLjQ4IDEzMS44NUwxNzMgOTRhNzYuODUgNzYuODUgMCAwIDEtMzYuNzktMTEuNDZMMCAwdjE0MGgxMjgwVjBsLTEzMS44MSAxMTEuNjhjLTE2LjQ3IDEzLjk2LTM1LjQ3IDIwLjk2LTU0LjcxIDIwLjE3eiIvPjwvZz48L3N2Zz4=");
}

/*
 * ===== CTA banner + Get In Touch contact form =====
 * Background #0d6282 - the site's real dark teal, matching the
 * testimonials' bottom divider fill and the button border color
 * already used throughout the page. This form posts to the same real
 * POST /f_contact route as the standalone contact page
 * (contact_us.blade.php), fixed earlier this session (reCAPTCHA
 * widget, redirect + confirmation) - no separate backend logic
 * needed here. Unlike that standalone page, the original's embedded
 * homepage form has no phone number field at all - confirmed from its
 * real markup, not omitted by mistake.
 */
.hp-cta {
    background-color: #0d6282;
    padding: 60px 0 100px;
}

.hp-cta-banner h2 {
    color: #fff;
    margin-bottom: 0;
}

.hp-contact-card {
    background-color: #fff;
    border-radius: 6px;
    padding: 50px;
    margin-top: 60px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .2);
}

.hp-form-group {
    margin-bottom: 20px;
}

.hp-form-group label {
    display: block;
    margin-bottom: 6px;
    color: #666;
}

.hp-form-group input,
.hp-form-group textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 12px 15px;
    font-family: "Century Gothic", Helvetica, Arial, Lucida, sans-serif;
    font-size: 16px;
    color: #333;
}

.hp-form-group input:focus,
.hp-form-group textarea:focus {
    outline: none;
    border-color: #65a3a9;
}

@media (max-width: 767px) {
    .hp-cta-banner .col-lg-4 {
        margin-top: 20px;
    }

    .hp-contact-card {
        padding: 30px 20px;
    }
}