/* ============================================================
   FOOTER FIX — paste this at the VERY END of your CSS
   (after style.css AND after footer-new.css)
   ============================================================ */

/* ── 1. BLUE STRIP BELOW FOOTER ─────────────────────────────
   DO NOT set background on html/body — it breaks the hero
   image border-radius (dark teal shows in the rounded corners).
   
   Instead: the footer paints a ::after pseudo-element that
   covers everything below it to the bottom of the viewport.   */

html, body {
    margin : 0;
    padding: 0;
    /* background stays whatever the template sets — do NOT override */
}

/* The section that sits behind the hero radius must be white
   so the rounded corners cut cleanly against white */
.th-hero-wrapper,
.th-hero-section,
.hero-section {
    background-color : #ffffff !important;
    border-radius: 0% !important;
}

/* Footer paints its own dark colour downward — covers the strip
   without touching body bg at all */
.footer-petexpo {
    position      : relative;
    overflow      : hidden;
    margin-bottom : 0 !important;
}

.copyright-wrap {
    position : relative;
    z-index  : 2;
}

/* ::after on copyright-wrap (the very last visible child)
   extends the dark footer colour to the bottom of the page */
.copyright-wrap::after {
    content          : '';
    position         : absolute;
    left             : 0;
    right            : 0;
    top              : 100%;           /* starts right below copyright */
    height           : 200px;          /* tall enough to cover any gap */
    background-color : #07414f;        /* same as footer-dark */
    z-index          : 1;
    pointer-events   : none;
}

/* ── 2. ROUNDED SHAPE BLEEDING OUT ──────────────────────────
   filter:blur() IGNORES overflow:hidden in every major browser.
   Solution: remove blur from the deco shapes entirely and
   replace with a larger, softer radial-gradient + low opacity.
   The shapes stay inside the footer without needing clipping.  */

/* kill the blur on ALL deco circles */
.footer-deco {
    filter  : none !important;   /* blur removed */
    opacity : 0.18 !important;
}

/* deco-1  — top-left, fully inside */
.footer-deco-1 {
    width      : 380px !important;
    height     : 380px !important;
    top        : -60px !important;
    left       : -80px !important;
    background : radial-gradient(circle at center,
                   rgba(4,169,178,0.6)  0%,
                   rgba(4,169,178,0.1) 55%,
                   transparent         75%) !important;
}

/* deco-2  — bottom-right  ← this is the visible circle */
.footer-deco-2 {
    width      : 260px !important;
    height     : 260px !important;
    bottom     : 20px  !important;   /* well inside the footer */
    right      : 30px  !important;   /* well inside the footer */
    background : radial-gradient(circle at center,
                   rgba(45,194,210,0.55) 0%,
                   rgba(45,194,210,0.1) 55%,
                   transparent          75%) !important;
}

/* deco-3  — middle */
.footer-deco-3 {
    width      : 160px !important;
    height     : 160px !important;
    top        : 50%   !important;
    left       : 55%   !important;
    background : radial-gradient(circle at center,
                   rgba(154,203,200,0.5) 0%,
                   rgba(154,203,200,0.08) 55%,
                   transparent           75%) !important;
}

/* ── 3. PAW WATERMARK — keep it inside too ──────────────── */
.footer-paw-watermark {
    bottom   : 10px  !important;
    right    : 2%    !important;
    font-size: 320px !important;   /* slightly smaller so it fits */
}

/* ── 4. SCROLL-TO-TOP BUTTON — keep it visible & above bg ── */
.scroll-top {
    z-index : 9999 !important;
    position: fixed !important;
}

/* ── 5. PARTICLES CANVAS (if present) ───────────────────── */
#particles-js,
.particles-js-canvas-element {
    display : none !important;   /* hide if it's causing the strip */
}