@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* =========================================================
   HUBBLEVA MASTER CSS
   Clean consolidated version
========================================================= */


/* =========================================================
   1. CROSS-BROWSER CONSISTENCY
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a,
button {
    -webkit-tap-highlight-color: transparent;
}

.sppb-row,
.sppb-column,
.sppb-column-addons,
#sp-header .row,
#sp-header [class*="col"] {
    min-width: 0;
}


/* =========================================================
   2. TOP BAR
========================================================= */
#sp-top-bar {
    position: relative;
    z-index: 1003;
    padding: 8px 0 !important;
    min-height: 38px !important;
}

#sp-top-bar,
#sp-top-bar a,
#sp-top-bar span,
#sp-top-bar i {
    font-size: 13px !important;
    line-height: 1.2 !important;
}


/* =========================================================
   3. HEADER
   Transparent over hero with soft gradient
========================================================= */

/* wrap fix for narrower laptops */
@media (max-width: 1366px) {
    #sp-header .sp-megamenu-parent > li > a {
        padding-left: 10px;
        padding-right: 10px;
        font-size: 14px;
    }
}

#sp-header .logo {
    margin-right: 20px;
}

/* logo sizing */
#sp-header .logo img {
    max-height: 90px;
    width: auto !important;
    height: auto !important;
}

@media (max-width: 991px) {
    #sp-header .logo img {
        max-height: 100px;
    }
}

@media (max-width: 575px) {
    #sp-header .logo img,
    #sp-logo img {
        max-height: 48px !important;
        width: auto !important;
        height: auto !important;
    }
}

#sp-header {
    position: absolute !important;
    top: 40px !important;
    left: 0;
    width: 100%;
    background: transparent !important;
    z-index: 999;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
    backdrop-filter: none !important;
}

#sp-header .container,
#sp-header .container-fluid {
    background: transparent !important;
}

/* real header content above overlay */
#sp-header .container,
#sp-header .container-fluid,
#sp-header .row,
#sp-header [class*="col"] {
    position: relative;
    z-index: 2;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: transparent !important;
}

/* lighter header fade */
#sp-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.24) 0%,
        rgba(0,0,0,0.14) 34%,
        rgba(0,0,0,0.06) 64%,
        rgba(0,0,0,0.00) 100%
    ) !important;
    background-repeat: no-repeat;
}

/* menu / links / burger */
#offcanvas-toggler,
#offcanvas-toggler > i,
#offcanvas-toggler > .fa,
#sp-header a,
#sp-header .sp-menu-item > a {
    position: relative !important;
    z-index: 5 !important;
}

#sp-header a,
#sp-header .sp-menu-item > a {
    color: #ffffff !important;
}

#offcanvas-toggler {
    font-size: 26px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    margin: 0 !important;
    color: #ffffff !important;
}

.burger-icon > span,
.burger-icon > span::before,
.burger-icon > span::after {
    background-color: #ffffff !important;
}


/* =========================================================
   4. STICKY HEADER
========================================================= */
.sticky-wrapper.is-sticky #sp-header,
#sp-header.header-sticky,
#sp-header.header-sticky-active {
    position: fixed !important;
    top: 0 !important;
    background: rgba(20,20,20,0.92) !important;
}

.sticky-wrapper.is-sticky #sp-header::before,
#sp-header.header-sticky::before,
#sp-header.header-sticky-active::before {
    display: none !important;
}


/* =========================================================
   5. DEVICE HEADER OVERRIDES
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    #sp-top-bar {
        padding: 4px 0 !important;
        min-height: 0 !important;
    }

    #sp-top-bar,
    #sp-top-bar a,
    #sp-top-bar span,
    #sp-top-bar i {
        font-size: 12px !important;
    }

    #sp-header {
        top: 40px !important;
    }

    #offcanvas-toggler {
        font-size: 28px !important;
        padding: 0 10px !important;
    }
}

@media (max-width: 767px) {
    #sp-top-bar {
        padding: 3px 0 !important;
        min-height: 0 !important;
    }

    #sp-top-bar,
    #sp-top-bar a,
    #sp-top-bar span,
    #sp-top-bar i {
        font-size: 11px !important;
    }

    #sp-header {
        top: 40px !important;
    }
}


/* =========================================================
   6. OFFCANVAS MENU
========================================================= */
.offcanvas-menu,
.offcanvas-menu .offcanvas-inner {
    background: #000 !important;
}

.offcanvas-menu .offcanvas-inner {
    padding-top: 120px !important;
    background-image: url("../../../images/hubble_does_the_best_landscaping_.png") !important;
    background-repeat: no-repeat !important;
    background-position: center 25px !important;
    background-size: 190px auto !important;
}

.offcanvas-menu .menu {
    padding: 0 25px 20px 25px !important;
    margin: 0 !important;
}

.offcanvas-menu .menu li {
    border-bottom: 1px solid rgba(255,255,255,0.18) !important;
}

.offcanvas-menu .menu li a {
    color: #14c388 !important;
    background: none !important;
    padding: 14px 0 !important;
    display: block !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

.offcanvas-menu .menu li a:hover {
    color: #ffffff !important;
}

.offcanvas-menu .menu li.active > a,
.offcanvas-menu .menu li.current > a {
    color: #ffffff !important;
}

.offcanvas-menu .close-offcanvas {
    color: #ffffff !important;
}

.offcanvas-menu .offcanvas-inner,
.offcanvas-menu .offcanvas-inner p,
.offcanvas-menu .offcanvas-inner span,
.offcanvas-menu .offcanvas-inner a {
    color: #ffffff !important;
    font-size: 14px;
}

.offcanvas-menu .offcanvas-inner a {
    color: #ffffff !important;
    font-weight: 400;
}

.offcanvas-menu .social-icons a,
.offcanvas-menu .offcanvas-inner .social-icons a,
.offcanvas-menu .offcanvas-inner .sppb-addon-social a {
    color: #ffffff !important;
    font-size: 18px !important;
    margin-right: 10px;
}

.offcanvas-menu .social-icons a:hover,
.offcanvas-menu .offcanvas-inner .social-icons a:hover {
    color: #14c388 !important;
}

.offcanvas-menu .offcanvas-inner .contact-info {
    margin-bottom: 20px;
}


/* =========================================================
   7. OPTIONAL SUBTLE SHAKE CLASS
========================================================= */
@keyframes subtleShake {
    0%   { transform: translate(0px, 0px); }
    20%  { transform: translate(-1px, 1px); }
    40%  { transform: translate(1px, -1px); }
    60%  { transform: translate(-1px, 0px); }
    80%  { transform: translate(1px, 1px); }
    100% { transform: translate(0px, 0px); }
}

.subtle-shake {
    animation: subtleShake 15s infinite ease-in-out;
    display: inline-block;
    transform: scale(1.02);
}


/* =========================================================
   8. HERO SECTION
   Row class: hubble-inner-hero
========================================================= */
.hubble-inner-hero {
    position: relative;
    min-height: 700px;
    display: flex;
    align-items: flex-end;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
    padding: 0 0 90px 0 !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* top + bottom gradient overlay */
.hubble-inner-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(20,20,20,0.72) 0%,
            rgba(20,20,20,0.42) 18%,
            rgba(20,20,20,0.00) 34%
        ),
        linear-gradient(
            to top,
            rgba(0,0,0,0.82) 0%,
            rgba(0,0,0,0.58) 22%,
            rgba(0,0,0,0.20) 48%,
            rgba(0,0,0,0.05) 70%,
            rgba(0,0,0,0.00) 100%
        );
    background-repeat: no-repeat;
}

/* animated background layer */
.hubble-inner-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: inherit;
    z-index: 0;
    animation: arbordaleFloat 24s ease-in-out infinite,
               arbordaleVibe 12s ease-in-out infinite;
    will-change: transform;
}

/* keep content above overlays */
.hubble-inner-hero .sppb-container,
.hubble-inner-hero .sppb-row,
.hubble-inner-hero .sppb-col-md-12,
.hubble-inner-hero .sppb-column,
.hubble-inner-hero .sppb-column-addons {
    position: relative;
    z-index: 2;
}

/* content width / positioning */
.hubble-inner-hero .sppb-column-addons {
    max-width: 760px;
    padding-left: 70px;
    padding-right: 20px;
    padding-bottom: 10px;
}


/* =========================================================
   9. HERO TEXT
========================================================= */

/* small top text with divider line */
.prestige-stonework-text {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: 100%;
    min-width: 0;
    margin-bottom: 12px;
    font-family: "Lato", sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1.2;
    color: #ffffff;
    text-align: left;
    letter-spacing: 0.5px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.prestige-stonework-text::after {
    content: "";
    display: block;
    height: 1px;
    flex: 1 1 auto;
    min-width: 80px;
    background: linear-gradient(
        to right,
        rgba(255,255,255,0.9),
        rgba(255,255,255,0.25)
    );
    background-repeat: no-repeat;
}

.prestige-stonework-text p {
    margin: 0 !important;
    white-space: nowrap;
}

/* main hero title 
.hubble-hero-title {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
    font-family: "Lato", sans-serif;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 300;
    color: #ffffff !important;
    text-align: left;
    letter-spacing: 0 !important;
    margin: 0 0 24px 0;
    max-width: 700px;
    white-space: normal !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}
*/
/* Hubble hero title and text width fix */
/* KEEP LINE WITHOUT CHANGING CLASSES */
.hubble-hero-title {
    position: relative;
    display: block !important;
    width: 100% !important;
    max-width: 900px !important;
    min-width: 0;
    padding-left: 95px;
    font-family: "Lato", sans-serif;
    font-size: 48px;
    line-height: 1.05;
    font-weight: 300;
    color: #ffffff !important;
    text-align: left;
    letter-spacing: 0 !important;
    margin: 0 0 24px 0;
    white-space: normal !important;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

.hubble-hero-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.58em;
    width: 72px;
    height: 1px;
    background: rgba(255,255,255,0.75);
}
.hubble-hero-title::before {
    content: "";
    width: 50px;
    height: 2px;
    background: rgba(255,255,255,0.75);
    opacity: 0.8;
    flex: 0 0 auto;
}


/* =========================================================
   10. HERO BUTTON
========================================================= */

/* HUBBLE HERO BUTTON */

.hubble-hero-btn .sppb-btn,
.hubble-hero-btn a.sppb-btn {
    background: #0D6648 !important;
    border: 1px solid #0D6648 !important;
    color: #ffffff !important;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 14px 26px !important;
    border-radius: 3px !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: all 0.25s ease;
}

/* hover effect */

.hubble-hero-btn .sppb-btn:hover,
.hubble-hero-btn a.sppb-btn:hover {
    background: #0a4e37 !important;
    border-color: #0a4e37 !important;
    transform: translateY(-2px);
}/* =========================================================
   11. HERO ANIMATION
========================================================= */
@keyframes arbordaleFloat {
    0%   { transform: translateY(0px) scale(1); }
    50%  { transform: translateY(-18px) scale(1.03); }
    100% { transform: translateY(0px) scale(1); }
}

@keyframes arbordaleVibe {
    0%   { rotate: 0deg; }
    25%  { rotate: -0.5deg; }
    50%  { rotate: 0.5deg; }
    75%  { rotate: -0.4deg; }
    100% { rotate: 0deg; }
}


/* =========================================================
   12. RESPONSIVE HERO FIXES
========================================================= */

/* tablet / small desktop */
@media (max-width: 991px) {
    .hubble-inner-hero {
        min-height: 520px !important;
        padding-bottom: 55px !important;
    }

    .hubble-inner-hero .sppb-column-addons {
        max-width: 90% !important;
        padding-left: 30px !important;
        padding-right: 20px !important;
    }

    .prestige-stonework-text {
        font-size: 18px !important;
    }

    .hubble-hero-title {
        font-size: 42px !important;
        line-height: 1.05 !important;
        max-width: 420px !important;
    }

    /* no lines for tablet */
    .prestige-stonework-text::after,
    .hubble-hero-title::before {
        display: none !important;
    }
}

/* phone */
@media (max-width: 575px) {
    .hubble-inner-hero {
        min-height: 330px !important;
        padding-top: 70px !important;
        padding-bottom: 24px !important;
    }

    .hubble-inner-hero .sppb-column-addons {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }

    .prestige-stonework-text,
    .hubble-hero-title,
    .hubble-hero-btn {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .prestige-stonework-text {
        font-size: 15px !important;
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .hubble-hero-title {
        font-size: 26px !important;
        line-height: 1.05 !important;
        margin-bottom: 16px !important;
        max-width: 100% !important;
    }

    .hubble-hero-btn .sppb-btn,
    .hubble-hero-btn a.sppb-btn {
        padding: 10px 16px !important;
        font-size: 13px !important;
        display: inline-block !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    /* no lines for phone */
    .prestige-stonework-text::after,
    .hubble-hero-title::before {
        display: none !important;
    }
}


/* =========================================================
   13. IPAD / TABLET HAMBURGER ONLY
========================================================= */
@media (min-width: 768px) and (max-width: 1024px) {
    #sp-header .sp-megamenu-wrapper,
    #sp-header .sp-megamenu-parent,
    #sp-header .sp-menu-full,
    #sp-header .sp-nav,
    #sp-header nav,
    #sp-header ul.sp-megamenu-parent {
        display: none !important;
    }

    #offcanvas-toggler {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-left: auto !important;
    }
}


/* =====================================================
   14. HUBBLE PREMIUM BACKGROUND SECTION
===================================================== */
.hubble-premium-section {
    position: relative !important;
    overflow: hidden !important;
    background-color: #0D6648 !important;
}

.hubble-premium-section::before {
    content: "" !important;
    position: absolute !important;
    top: -8% !important;
    left: -8% !important;
    width: 116% !important;
    height: 116% !important;
    background-image: url('/images/stone-texture.png') !important;
    background-repeat: repeat !important;
    background-position: center center !important;
    background-size: 1400px !important;
    opacity: 0.20 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    animation: hubbleStoneDrift 12s ease-in-out infinite !important;
    will-change: transform !important;
}

.hubble-premium-section::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(13,102,72,0.18) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.hubble-premium-section > * {
    position: relative !important;
    z-index: 2 !important;
}

@keyframes hubbleStoneDrift {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-60px, -40px) scale(1.04);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

.hubble-premium-section ul,
.hubble-premium-section ul li {
    color: #ffffff !important;
}

.hubble-premium-section ul li::marker {
    color: #ffffff !important;
}










/*========================================
DO NOT TOUCH THIS LINE
=============================================*/

/* DO NOT REMOVE thin line at top of page - working */

/* =========================================
   NUCLEAR FIX - KILL TOP SEAM / LINE FOREVER
========================================= */

/* remove every possible top border/shadow/line */
html, body,
#sp-top-bar,
#sp-header,
#sp-header .container,
#sp-header .container-fluid,
#sp-header .row,
#sp-header [class*="col"],
.header,
.sticky-wrapper,
.sticky-wrapper.is-sticky,
.sppb-section:first-child,
.sppb-section:first-child .sppb-container,
.sppb-section:first-child .sppb-row,
.hubble-inner-hero {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* kill pseudo elements that can create a seam */
#sp-top-bar::before,
#sp-top-bar::after,
#sp-header::after,
.header::before,
.header::after,
.sticky-wrapper::before,
.sticky-wrapper::after,
.sppb-section:first-child::before,
.sppb-section:first-child::after {
    border: 0 !important;
    box-shadow: none !important;
}

/* force first hero to sit flush */
.sppb-section:first-child,
.sppb-section:first-child .sppb-container,
.sppb-section:first-child .sppb-row,
.hubble-inner-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* tiny overlap to hide any rendering seam */
.hubble-inner-hero {
    position: relative !important;
    margin-top: -2px !important;
}

/* keep header transparent and clean */
#sp-header {
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

#sp-top-bar { background: transparent !important; }



/* LARGER IPHONE HEADER LOGO */
@media (max-width: 767px) {
    #sp-header .logo,
    #sp-header #sp-logo,
    .navbar-brand {
        max-width: 220px !important;
    }

    #sp-header .logo img,
    #sp-header #sp-logo img,
    .sp-default-logo,
    .logo-image,
    .navbar-brand img {
        width: 200px !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}



/* PRIMARY SITE BUTTONS */
.btn-primary,
.sppb-btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary,
.btn.btn-primary,
.sppb-btn.sppb-btn-primary {
    background: #0F6749 !important;
    background-color: #0F6749 !important;
    border-color: #0F6749 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.sppb-btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
input.btn-primary:hover,
.btn.btn-primary:hover,
.sppb-btn.sppb-btn-primary:hover {
    background: #0b523a !important;
    background-color: #0b523a !important;
    border-color: #0b523a !important;
    color: #ffffff !important;
}

/* MOBILE HERO TITLE FIX - REMOVE BIG INDENT */
@media (max-width: 767px) {
    .hubble-hero-title {
        padding-left: 20px !important;
        max-width: 100% !important;
        font-size: 34px !important;
        line-height: 1.1 !important;
    }

    .hubble-hero-title::before {
        display: none !important;
    }
}

/* MOBILE HERO BUTTON ALIGN WITH TITLE */
@media (max-width: 767px) {
    .hubble-hero-btn,
    .hubble-hero-btn .sppb-addon,
    .hubble-hero-btn .sppb-addon-content {
        padding-left: 20px !important;
    }
}

/* TABLET HERO TITLE FIX - REMOVE INDENT */
@media (min-width: 768px) and (max-width: 1024px) {
    .hubble-hero-title {
        padding-left: 20px !important;
        max-width: 100% !important;
        font-size: 40px !important;
        line-height: 1.1 !important;
    }

    .hubble-hero-title::before {
        display: none !important;
    }

    .hubble-hero-btn,
    .hubble-hero-btn .sppb-addon,
    .hubble-hero-btn .sppb-addon-content {
        padding-left: 20px !important;
        margin-left: 0 !important;
        text-align: left !important;
    }
}

/* white bullets class */
.white-bullets,
.white-bullets ul,
.white-bullets ol {
    color: #ffffff !important;
}

.white-bullets li {
    color: #ffffff !important;
}

.white-bullets ul li::marker,
.white-bullets ol li::marker {
    color: #ffffff !important;
}

@media (max-width: 575px) {
    #sp-header .logo img,
    #sp-logo img {
        width: auto !important;
        height: auto !important;
        max-height: clamp(42px, 15vw, 72px) !important;
    }
}


/* ================================
   HUBBLE SERVICES MARQUEE
   ================================ */

.hubble-marquee-wrap {
    width: 100%;
    overflow: hidden;
    background: #0D6648;
    padding: 14px 0;
    white-space: nowrap;
}

.hubble-marquee-track {
    display: inline-block;
    white-space: nowrap;
    animation: hubbleMarquee 75s linear infinite;
}

.hubble-marquee-track span {
    display: inline-block;
    font-family: "Lato", sans-serif;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    margin-right: 18px;
}

.hubble-marquee-track .sep {
    color: rgba(255,255,255,0.65);
    font-size: 16px;
    margin-right: 18px;
}

@keyframes hubbleMarquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


.hubble-marquee-wrap {
    background: #0D6648;
    border-top: 1px solid rgba(255,255,255,0.15);
    border-bottom: 1px solid rgba(255,255,255,0.15);
}


/* engage stuff */

.hubble-popup-call {
    background: linear-gradient(180deg, rgba(13,102,72,0.98) 0%, rgba(9,78,55,0.98) 100%);
    padding: 26px 22px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 14px 34px rgba(0,0,0,0.22);
}

.hubble-popup-title {
    color: #ffffff;
    font-family: "Lato", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: 0.4px;
}

.hubble-popup-subtitle {
    color: rgba(255,255,255,0.88);
    font-family: "Lato", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 18px;
}

.hubble-popup-btn {
    display: inline-block;
    background: #000000;
    color: #ffffff !important;
    text-decoration: none !important;
    font-family: "Lato", sans-serif;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 13px 22px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.14);
    transition: all 0.25s ease;
}

.hubble-popup-btn:hover {
    background: #1a1a1a;
    color: #ffffff !important;
    transform: translateY(-2px);
}


.hubble-popup-intro {
    text-align: center;
    margin-bottom: 20px;
}

.hubble-popup-intro h3 {
    font-size: 30px;
    color: #ffffff;
    margin-bottom: 12px;
}

.hubble-popup-intro p {
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
}

.hubble-popup-note {
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    margin-top: 10px;
}

/* Form fields */
/* ================================
   HUBBLE CONVERT FORMS POPUP
================================ */

/* OUTER FORM WRAPPER */
.hubble-cf-popup,
.hubble-cf-popup .convertforms,
.hubble-cf-popup form {
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* REMOVE DEFAULT GREY FORM PANEL */
.hubble-cf-popup .cf-response,
.hubble-cf-popup .cf-fields,
.hubble-cf-popup .cf-form-content,
.hubble-cf-popup .cf-control-group,
.hubble-cf-popup .control-group,
.hubble-cf-popup .form-group {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* FORM TITLE INSIDE CONVERT FORMS */
.hubble-cf-popup .cf-form-title,
.hubble-cf-popup .cf-response h1,
.hubble-cf-popup .cf-response h2,
.hubble-cf-popup .cf-response h3,
.hubble-cf-popup .cf-response h4 {
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    color: #0d6648 !important;
    text-align: center !important;
    margin: 0 0 14px 0 !important;
}

/* DESCRIPTION */
.hubble-cf-popup .cf-form-description,
.hubble-cf-popup .form-description,
.hubble-cf-popup .cf-description,
.hubble-cf-popup p {
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    text-align: center !important;
    margin-bottom: 20px !important;
}

/* FIELD LABELS */
.hubble-cf-popup label,
.hubble-cf-popup .cf-label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #222222 !important;
    margin-bottom: 7px !important;
}

/* FIELD SPACING */
.hubble-cf-popup .cf-control-group,
.hubble-cf-popup .control-group,
.hubble-cf-popup .form-group {
    margin-bottom: 16px !important;
    padding: 0 !important;
}

/* INPUTS / SELECT / TEXTAREA */
.hubble-cf-popup input[type="text"],
.hubble-cf-popup input[type="email"],
.hubble-cf-popup input[type="tel"],
.hubble-cf-popup input[type="number"],
.hubble-cf-popup textarea,
.hubble-cf-popup select,
.hubble-cf-popup .cf-control-input,
.hubble-cf-popup .cf-control-textarea,
.hubble-cf-popup .cf-control-select {
    width: 100% !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #222222 !important;
    background: #ffffff !important;
    border: 1px solid #d8d8d8 !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    appearance: none !important;
}

/* TEXTAREA HEIGHT */
.hubble-cf-popup textarea {
    min-height: 140px !important;
    resize: vertical !important;
}

/* FOCUS STATE */
.hubble-cf-popup input[type="text"]:focus,
.hubble-cf-popup input[type="email"]:focus,
.hubble-cf-popup input[type="tel"]:focus,
.hubble-cf-popup input[type="number"]:focus,
.hubble-cf-popup textarea:focus,
.hubble-cf-popup select:focus {
    border-color: #0d6648 !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(13, 102, 72, 0.12) !important;
}

/* SUBMIT BUTTON */
.hubble-cf-popup button,
.hubble-cf-popup input[type="submit"],
.hubble-cf-popup .cf-btn,
.hubble-cf-popup .cf-submit-form,
.hubble-cf-popup .btn-primary {
    width: 100% !important;
    display: inline-block !important;
    background: #0d6648 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 15px 22px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: none !important;
}

.hubble-cf-popup button:hover,
.hubble-cf-popup input[type="submit"]:hover,
.hubble-cf-popup .cf-btn:hover,
.hubble-cf-popup .cf-submit-form:hover,
.hubble-cf-popup .btn-primary:hover {
    background: #094c35 !important;
    transform: translateY(-2px) !important;
}

/* SMALL NOTE UNDER FORM */
.hubble-popup-note {
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: #777777;
    margin-top: 12px;
}

/* MOBILE */
@media (max-width: 575px) {
    .hubble-cf-popup .cf-form-title,
    .hubble-cf-popup .cf-response h1,
    .hubble-cf-popup .cf-response h2,
    .hubble-cf-popup .cf-response h3,
    .hubble-cf-popup .cf-response h4 {
        font-size: 24px !important;
    }
}
margin-top: 12px;
}



/* ================================
   HUBBLE MAIN MENU UNDERLINE
   Desktop main menu only
================================ */

/* target top-level menu links */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* create hidden underline */
#sp-header .sp-megamenu-parent > li > a::after,
#sp-header .sp-megamenu-parent > li > span::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #ffffff;
    transform: translateX(-50%);
    transition: width 0.3s ease;
    pointer-events: none;
}

/* hover underline animation */
#sp-header .sp-megamenu-parent > li:hover > a::after,
#sp-header .sp-megamenu-parent > li:hover > span::after,
#sp-header .sp-megamenu-parent > li > a:hover::after,
#sp-header .sp-megamenu-parent > li > span:hover::after {
    width: 70%;
}

/* active/current menu item underline */
#sp-header .sp-megamenu-parent > li.active > a::after,
#sp-header .sp-megamenu-parent > li.active > span::after,
#sp-header .sp-megamenu-parent > li.current-item > a::after,
#sp-header .sp-megamenu-parent > li.current-item > span::after,
#sp-header .sp-megamenu-parent > li.current > a::after,
#sp-header .sp-megamenu-parent > li.current > span::after {
    width: 70%;
}

/* optional: active link text color */
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span,
#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li.current-item > span,
#sp-header .sp-megamenu-parent > li.current > a,
#sp-header .sp-megamenu-parent > li.current > span {
    color: #ffffff !important;
}

/* keep offcanvas/mobile menu unaffected */
@media (max-width: 991.98px) {
    #sp-header .sp-megamenu-parent > li > a::after,
    #sp-header .sp-megamenu-parent > li > span::after {
        display: none;
    }
}