:root {
    --primary-color: #081584;
    --primary-color-hover: #1a2aa5;
    --secondary-color: #20c997;
    --secondary-color-hover: #1ba078;
    --success-color: #2cfa0b;
    --success-color-hover: #24d109;
    --bs-green-electric: #2cfa0b;
    --text-color: #4a5568;
    --text-color-hover: #2d3748;
    --black-color: #0f172a;
    --white: #ffffff;
    --orange: #ff6b35;
    /* Vibrating vibrant orange */
    --orange-hover: #e85a25;
    --bg-light: #f8fafc;

    --small: clamp(0.875rem, 0.2vi + 0.8rem, 1rem);
    --paragraph: clamp(1.05rem, 0.3vi + 0.95rem, 1.25rem);
    --heading5: clamp(1.25rem, 0.61vi + 1.1rem, 1.58rem);
    --heading4: clamp(1.56rem, 1vi + 1.31rem, 2.11rem);
    --heading3: clamp(1.95rem, 1.56vi + 1.56rem, 2.81rem);
    --heading2: clamp(2.44rem, 2.38vi + 1.85rem, 3.75rem);
    --heading1: clamp(3.05rem, 3.54vi + 2.17rem, 5rem);

    /* Premium Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-medium: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.4);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Application Physics */
html {
    scroll-padding-top: 150px;
    /* Always reserve scrollbar space so nav width is stable */
    overflow-y: scroll;
} 
body {
    background-color: var(--bg-light);
    color: var(--text-color);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}
 
html,
body {
    margin: 0;
    padding: 0;

    /* overflow-x: clip does NOT create a scroll container (unlike hidden),
       so position:sticky on .rrx-sticky and similar elements works correctly.
       overflow-x: hidden was breaking sticky nav on all rrx-theme pages. */
    overflow-x: clip;
}
/*  scroll-behavior: smooth;*/
/* Prevent any iframe from bleeding outside its container and
   triggering a horizontal scrollbar on the parent page.        */
iframe {
    max-width: 100%;
}




/* Glassmorphism Utilities */
.glass-panel {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: var(--shadow-medium);
}

.glass-dark {
    background: rgba(12, 26, 75, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Premium Gradients */
.bg-gradient-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, #1a365d 100%);
}

.bg-gradient-orange {
    background: linear-gradient(135deg, var(--orange) 0%, #ff8f66 100%);
}

.h1 {
    font-size: var(--heading1);
    font-weight: 700;
    line-height: 1.2
}

.h2 {
    font-size: var(--heading2);
    font-weight: 700;
    line-height: 1.2
}

.h3 {
    font-size: var(--heading3);
    font-weight: 700;
    line-height: 1.2
}

.h4 {
    font-size: var(--heading4);
    font-weight: 700;
    line-height: 1.2
}

.h5 {
    font-size: var(--heading5);
    font-weight: 700;
    line-height: 1.2
}

.p {
    font-size: var(--paragraph);
    line-height: 1.5
}

.small {
    font-size: var(--small);
    line-height: 1.5
}

.bg-primary {
    background-color: var(--primary-color)  !important;
}

.bg-success {
    background-color: var(--success-color)
}

.bg-text {
    background-color: var(--text-color)
}

.bg-black {
    background-color: var(--black-color)
}

.bg-white {
    background-color: var(--white)
}

.bg-orange {
    background-color: var(--orange)
}

.text-primary {
    color: var(--primary-color)
}
.text-success {
    color: var(--success-color)
}

.text-text {
    color: var(--text-color)
}

.text-black {
    color: var(--black-color)
}

.text-white {
    color: var(--white)
}

.text-orange {
    color: var(--orange)
}

.border-primary {
    border-color: var(--primary-color)
}

.border-success {
    border-color: var(--success-color)
}

.border-text {
    border-color: var(--text-color)
}

.border-black {
    border-color: var(--black-color)
}

.border-white {
    border-color: var(--white)
}

.border-orange {
    border-color: var(--orange)
}

/* Electric Green Utilities */
.text-success-electric {
    color: var(--bs-green-electric) !important;
}
.bg-success-electric {
    background-color: var(--bs-green-electric) !important;
}
.border-success-electric {
    border-color: var(--bs-green-electric) !important;
}

.shadow-medium {
    box-shadow: var(--shadow-medium)
}

.transition {
    transition: var(--transition)
}

/* Floating Message Bar */
.message_bar {
    position: fixed;
    right: 20px;
    bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 32px));
    transition: opacity 0.28s ease, transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

body:not(.menu-below-fold) .message_bar {
    opacity: 0;
    pointer-events: none;
    transform: translateX(calc(100% + 32px));
}

body.menu-below-fold .message_bar {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
}

body.mobile-menu-active .message_bar {
    display: none !important;
}

/* Global Sticky Context Menu Horizontal Scroll (Mobile) */
@media (max-width: 767.98px) {
    nav[class*="-sticky-nav"] {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.5rem;
         
        scrollbar-width: none; /* Firefox */
    }
    nav[class*="-sticky-nav"]::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }
    nav[class*="-sticky-nav"] a {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

@media (max-width: 767.98px) {
    .message_bar {
        bottom: 80px;
        gap: 8px;
        right: 15px;
    }
    .message_bar a {
        width: 44px;
        height: 44px;
        font-size: 1.25rem;
    }
}

.message_bar a {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
    text-decoration: none;
    color: #fff !important;
    font-size: 1.35rem;

    /* ── Shiny reflective glass border ──
       A thin bright line at the very top (specular edge),
       fading to the button's own color at the bottom.       */
    border: 2px solid transparent !important;
    border-image: none !important;

    /* ── Shiny chrome-mirror box-shadow ──
       Layer 1 (inset top): sharp bright specular highlight — the "mirror" line
       Layer 2 (inset upper): wide soft highlight — the "dome" reflection
       Layer 3 (inset bottom): dark shadow — gives depth / roundness
       Layer 4: outer drop shadow
       Layer 5: outer color glow (uses per-button CSS var)              */
    box-shadow:
        inset 0 2px 0 0   rgba(255, 255, 255, 1.0),
        inset 0 8px 12px -4px rgba(255, 255, 255, 0.55),
        inset 0 -8px 14px -4px rgba(0, 0, 0, 0.45),
        0 5px 12px rgba(0, 0, 0, 0.55),
        0 0 18px var(--msg-glow, rgba(255,255,255,0.4)) !important;

    /* Thin bright ring using outline instead of border so it doesn't affect size */
    outline: 1.5px solid rgba(255, 255, 255, 0.75);
    outline-offset: -1px;
}

/* Ensure icons inside inherit the larger size */
.message_bar a i {
    font-size: inherit;
    line-height: 1;
    /* Subtle text shadow so icon pops off the reflective surface */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* $ button — white text (gold is dark enough for contrast) */
.msg-btn-search span {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.message_bar a:hover {
    transform: scale(1.18) translateX(4px);
    z-index: 10;
    /* On hover: sharper specular, stronger glow */
    box-shadow:
        inset 0 2px 0 0   rgba(255, 255, 255, 1.0),
        inset 0 10px 16px -4px rgba(255, 255, 255, 0.65),
        inset 0 -8px 14px -4px rgba(0, 0, 0, 0.5),
        0 8px 20px rgba(0, 0, 0, 0.65),
        0 0 28px var(--msg-glow, rgba(255,255,255,0.6)) !important;
}

/* ── Button colours — vivid, maximally contrasting palette ── */

/* ↑ UP — Electric cyan */
.msg-btn-top {
    background: linear-gradient(160deg, #00eeff 0%, #00aacc 45%, #006688 100%) !important;
    --msg-glow: rgba(0, 212, 255, 0.75);
}
.msg-btn-top:hover {
    background: linear-gradient(160deg, #33f4ff 0%, #00ccee 45%, #007799 100%) !important;
}

/* 🏠 HOME — Royal purple */
.msg-btn-home {
    background: linear-gradient(160deg, #c084fc 0%, #8b5cf6 45%, #5b21b6 100%) !important;
    --msg-glow: rgba(139, 92, 246, 0.75);
}
.msg-btn-home:hover {
    background: linear-gradient(160deg, #d09ffe 0%, #a070ff 45%, #6d28d9 100%) !important;
}

/* 🚀 ROCKET — Vivid orange */
.msg-btn-est {
    background: linear-gradient(160deg, #ffaa77 0%, #ff6b35 45%, #cc3d00 100%) !important;
    --msg-glow: rgba(255, 107, 53, 0.75);
}
.msg-btn-est:hover {
    background: linear-gradient(160deg, #ffbb88 0%, #ff8050 45%, #dd4400 100%) !important;
}

/* 💬 WHATSAPP — Bright green */
.msg-btn-wa {
    background: linear-gradient(160deg, #5dfc8a 0%, #25D366 45%, #128c3e 100%) !important;
    --msg-glow: rgba(37, 211, 102, 0.75);
}
.msg-btn-wa:hover {
    background: linear-gradient(160deg, #77ff9e 0%, #3de87a 45%, #1aaa4e 100%) !important;
}

/* $ ESTIMATE — Hot gold */
.msg-btn-search {
    background: linear-gradient(160deg, #fde68a 0%, #f59e0b 45%, #b45309 100%) !important;
    --msg-glow: rgba(245, 158, 11, 0.75);
}
.msg-btn-search:hover {
    background: linear-gradient(160deg, #fef0a0 0%, #fbb024 45%, #c96010 100%) !important;
}

/* Keep legacy classes working */
.message_bar a.bg-success {
    background-color: #25D366 !important;
    color: white !important;
}

.message_bar a.bg-primary {
    background-color: var(--primary-color) !important;
    color: white !important;
}

.message_bar a.bg-secondary {
    background-color: #334155 !important;
    color: white !important;
}

/* Marquee / Scroller */
.scroller {
    max-width: 100%;
    padding: 1rem 0;
}

.scroller__inner {
    padding: 1rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 3rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}

@keyframes scroll {
    to {
        transform: translate(calc(-50% - 1.5rem));
    }
}

.tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
}

.tag-list li {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tag-list img {
    height: 40px;
    width: auto;
    filter: grayscale(1) opacity(0.7);
    transition: var(--transition);
}

.tag-list li:hover img {
    filter: grayscale(0) opacity(1);
}

/* Process Steps */
.process-step {
    position: relative;
    padding-left: 3rem;
}

.process-step::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 50px;
    bottom: -30px;
    width: 2px;
    background: rgba(255, 255, 255, 0.1);
}

.process-step:last-child::before {
    display: none;
}

.step-number {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    background: var(--orange);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    z-index: 1;
}

/* Animated Gradient Text */
.animated-gradient-text {
    background: linear-gradient(to right, #2cfa0b, #20c997, #2cfa0b);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gradient-text 3s linear infinite;
    font-weight: bold;
}

@keyframes gradient-text {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: 200% center;
    }
}

.multicolored-text {
    background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #ff00ff);
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 10;
}

/* Gallery Hover */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    cursor: pointer;
}

.gallery-item img {
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 26, 75, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

a {
    color: var(--primary-color);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--primary-color-hover);
}

 

.text-success:hover {
    color: var(--success-color-hover) !important;
}

 

.text-orange:hover {
    color: var(--orange-hover) !important;
}

.bg-orange:hover {
    background-color: var(--orange-hover) !important;
}


/* Service Card Styles Update */
.service-card-container {
    max-width: 320px;
    width: 100%;
}

.service-heading-bar {
    border-radius: 1rem 1rem 0 0;
    font-size: 1.85rem;
    letter-spacing: 1px;
    padding: 0.8rem 0 0.6rem 0;
    margin-bottom: -8px;
    text-transform: uppercase;
    width: 100%;
}

.service-card {
    color: var(--white);
    min-height: 340px;
    max-width: 320px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border-radius: 1rem;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-slow);
    overflow: hidden;
    position: relative;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}

.service-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.service-card-body {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.service-card-text {
    font-size: 1.18rem;
    font-weight: 600;
    text-align: left;
    margin: 0;
    letter-spacing: 0.5px;
}

.service-card-text-lg {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}


/* Slide-out Navigation Styles - Cleaned Up */
.slide-nav {
    position: fixed;
    top: 0;
    right: 0;
    width: 320px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    display: none;
    flex-direction: column;
    outline: none;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(.4, 0, .2, 1);
    visibility: hidden;
    opacity: 0;
}

.slide-nav.open {
    display: flex;
    transform: translateX(0);
    visibility: visible;
    opacity: 1;
}

.nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width: 992px) {
    .slide-nav {
        width: 480px;
        min-width: 320px;
        max-width: 100vw;
    }
}

@media (max-width: 991.98px) {
    .slide-nav {
        width: 100vw;
        min-width: 0;
    }
}

.slide-nav-header {
    border-bottom: 1px solid #eee;
}

.slide-nav-list {
    margin-top: 2rem;
}

.slide-nav-list li {
    margin-bottom: 1.5rem;
}

.slide-nav-list .nav-link {
    font-size: 1.2rem;
    color: #222;
    font-weight: 600;
    transition: color 0.2s;
}

.slide-nav-list .nav-link.active,
.slide-nav-list .nav-link:hover {
    color: #ff7f50;
}

@media (max-width: 400px) {
    .slide-nav {
        width: 100vw;
        min-width: 0;
    }
}

/* Mobile Top Bar */
.mobile-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    z-index: 1030;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    transition: background 0.3s ease;
}
.mobile-top-bar .mobile-logo img {
    height: 75px;
    width: auto;
}
.mobile-top-bar .mobile-hamburger {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.mobile-top-bar .mobile-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #ff7f50;
    border-radius: 2px;
    transition: all 0.3s ease;
}
/* Spacer so page content clears the fixed mobile bar */
.mobile-bar-spacer {
    height: 100px;
    display: block;
}
@media (min-width: 992px) {
    .mobile-top-bar,
    .mobile-bar-spacer {
        display: none !important;
    }
}

/* Base Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8f9fa;
    min-height: 100vh;
    /* Equivalent to min-h-screen */
    display: flex;
    flex-direction: column;
}

.container {
    max-width: 960px;
}

.card {
    border-radius: 1rem;
    /* Rounded corners for cards */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

/* Form Specific Styles */
.form-step {
    display: none;
    /* Hidden by default */
}

.form-step.active {
    display: block;
    /* Active step shown */
}

.progress-bar {
    border-radius: 0.5rem;
    /* Rounded corners for progress bar */
}

.btn-primary {
    background-color: var(--primary-color);
    /* Bootstrap primary blue */
    border-color: var(--primary-color);
    border-radius: 0.5rem;
    /* Rounded corners for buttons */
    padding: 0.75rem 1.5rem;
}

.btn-primary:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}

.btn-outline-secondary {
    border-radius: 0.5rem;
    /* Rounded corners for buttons */
    padding: 0.75rem 1.5rem;
}

.form-control {
    border-radius: 0.5rem;
    /* Rounded corners for form inputs */
    padding: 0.75rem 1rem;
}

.input-group-text {
    border-radius: 0.5rem 0 0 0.5rem;
    /* Rounded corners for input group text */
}

.form-check-input {
    border-radius: 0.25rem;
    /* Slightly rounded for checkboxes/radios */
}

/* Hero Section Styles */
.hero-section {
    color: white;
    padding: 4rem 0 8rem 0;
    position: relative;
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding-top: 2rem;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.hero-subtitle {
    font-size: 1.0rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.hero-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin-bottom: 2rem;
}

.hero-btn {
    border-radius: 50px;
    padding: 1.125rem 2.5rem;
    font-weight: 700;
    color: white !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: var(--shadow-medium);
    transition: var(--transition);
    border: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.hero-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: all 0.5s ease;
    z-index: -1;
}

.hero-btn:hover::before {
    left: 100%;
}


/* ===== GET QUOTE BUTTON (Orange + Shining Border) ===== */

/* 
 * CORRECT TECHNIQUE:
 * 1. Wrapper is STATIC — no transform/rotation on wrapper itself (avoids rotating rectangle bug)
 * 2. Wrapper uses animated box-shadow for outer glow pulse
 * 3. Button has overflow:hidden + border-radius — clips ::before spinning square to pill shape
 * 4. ::before = large square with conic gradient, rotates inside the pill (clipped at edges)
 * 5. ::after = solid orange fill at inset:3px (z-index:-1) masks center, shows only border ring
 * 6. Text is naturally above because pseudo-elements use NEGATIVE z-index
 */

/* ---- WRAPPER: static pill that provides outer ambient glow ---- */
.hero-btn-glass-wrap {
    display: inline-block;
    border-radius: 999px;
    padding: 3px;
    background: transparent;
    transition: all 0.3s ease;
}

@keyframes wrapperGlow {
    0% {
        box-shadow: 0 0 10px 2px rgba(255, 160, 30, 0.6), 0 0 11px 4px rgba(255, 120, 0, 0.35);
    }

    50% {
        box-shadow: 0 0 18px 5px rgba(255, 210, 80, 0.9), 0 0 20px 10px rgba(255, 160, 30, 0.55);
    }

    100% {
        box-shadow: 0 0 10px 2px rgba(255, 160, 30, 0.6), 0 0 11px 4px rgba(255, 120, 0, 0.35);
    }
}

/* ---- THE BUTTON ---- */
.hero-btn-glass {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 999px;
    z-index: 2;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #fff !important;
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;

    /* The button's own background — visible through (because ::after only covers from inset:3px) */
    background: linear-gradient(135deg, #ff8c42 0%, #ff6a1a 55%, #f55e00 100%);

    /* Inner highlight */
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);

    /* CRITICAL: clips ::before so the spinning square never escapes pill bounds */
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* ---- SPINNING CONIC SQUARE inside button (clipped to pill by overflow:hidden) ---- */
/* The bright spot sweeps the inside edge of the pill only — never goes outside */
.hero-btn-glass::after {
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 50%;
    left: 50%;
    /* rotate from center — key: keep translate separate so rotation is around center */
    transform: translate(-50%, -50%) rotate(0deg);
    background: conic-gradient(from 0deg,
            transparent 0deg,
            transparent 60deg,
            rgba(255, 240, 140, 0.5) 78deg,
            rgba(255, 255, 255, 0.9) 90deg,
            rgba(255, 230, 80, 0.85) 100deg,
            rgba(255, 255, 255, 0.9) 110deg,
            rgba(255, 240, 140, 0.5) 128deg,
            transparent 148deg,
            transparent 360deg);
    animation: spinInside 2.4s linear infinite;
    z-index: -2;
    /* behind ::after, behind text — clipped by overflow:hidden to pill edge */
}

/* ---- SOLID ORANGE CENTER FILL (masks center, reveals only the border ring) ---- */
.hero-btn-glass::before {
    content: "";
    position: absolute;
    inset: 3px;
    /* 3px ring gap matches wrapper padding */
    border-radius: 999px;
    background: linear-gradient(135deg, #ff9040 0%, #ff6c1a 55%, #f55e00 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    z-index: -1;
    /* in front of ::before glow, but BEHIND the button text */
}

/* HOVER */
.hero-btn-glass:hover {
    transform: translateY(-2px) scale(1.02);
}

.hero-btn-glass-wrap:hover {
    animation: none;
    background: linear-gradient(135deg, #ff9a00, #ffcc44, #ff9a00, #ff6200);
    box-shadow:
        0 0 10px 3px rgba(255, 210, 80, 0.8),
        0 0 24px 6px rgba(255, 160, 30, 0.4);
}

/* SPINNING KEYFRAME for the inner square */
@keyframes spinInside {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* SWEEP ANIMATION (kept for any other use) */
@keyframes borderSweep {
    0% {
        transform: rotate(0deg);
        opacity: 0;
    }

    20% {
        opacity: 0.8;
    }

    50% {
        transform: rotate(140deg);
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: rotate(220deg);
        opacity: 0;
    }
}


.hero-btn-premium {
    position: relative;
    display: inline-block;
    padding: 16px 34px;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.6px;
    color: #fff;
    text-decoration: none;
    border: none;
    overflow: hidden;
    cursor: pointer;

    /* Premium gradient */
    background: linear-gradient(180deg, #ff9a6b 0%, #ff7a45 50%, #ff6b35 100%);

    /* Depth */
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition: all 0.25s ease;
}

/* Light sweep (premium effect) */
.hero-btn-premium::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;

    background: linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, 0.45),
            transparent);

    transform: skewX(-20deg);
    transition: all 0.6s ease;
}

/* Hover */
.hero-btn-premium:hover {
    transform: translateY(-2px);
    box-shadow:
        0 12px 28px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.hero-btn-premium:hover::before {
    left: 120%;
}






.hero-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    margin-left: 1rem;
}

.hero-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: var(--white) !important;
    transform: translateY(-3px);
}

.price-display {
    background-color: rgba(255, 255, 255, 0.9);
    color: #333;
    padding: 0.75rem 1.5rem;
    border-radius: 0.75rem;
    font-weight: 700;
    text-align: center;
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2), 0 5px 25px rgba(255, 127, 80, 0.8);
    /* Enhanced orange glow */
    font-size: 1.5rem;
    line-height: 1.2;
    border-bottom: 3px solid #ff7f50;
    /* Bright orange bottom border */
    animation: intermittent-wobble 4s ease-in-out infinite;
}

/* Wobble animation to attract attention from time to time */
@keyframes intermittent-wobble {

    0%,
    15%,
    100% {
        transform: translateX(-50%) rotate(0);
    }

    2% {
        transform: translateX(-50%) rotate(4deg);
    }

    4% {
        transform: translateX(-50%) rotate(-4deg);
    }

    6% {
        transform: translateX(-50%) rotate(2deg);
    }

    8% {
        transform: translateX(-50%) rotate(-2deg);
    }

    10% {
        transform: translateX(-50%) rotate(0);
    }
}

.price-display::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(255, 255, 255, 0.9);
}

.price-display small {
    display: block;
    font-size: 0.8rem;
    font-weight: 400;
    color: #666;
}

.top-nav-icons {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 3;
    color: white;
    font-size: 1.5rem;
}

.top-nav-icons a {
    color: white;
    margin-left: 1rem;
    text-decoration: none;
}

.top-nav-icons a:hover {
    opacity: 0.8;
}

.logo-placeholder {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 3;
    width: auto;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

/* How It Works Section Styles */
.how-it-works-section {
    text-align: center;
    padding: 4rem 0;
    background-color: white;
}

.badge-online-shop {
    background-color: #343a40;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 1.5rem;
}

.how-it-works-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #333;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.how-it-works-description {
    font-size: 1.4rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto 3rem auto;
}

.step-circle {
    width: 60px;
    height: 60px;
    background-color: #ff7f50;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 auto 1.5rem auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.step-description {
    font-size: 1rem;
    color: #3e2006;
}

/* Benefits Section Styles */
.section-padding {
    padding: 3rem 0;
}

.section-bg-light {
    background-color: #f0f2f5;
}

.feature-icon {
    font-size: 3rem;
    color: #007bff;
    margin-bottom: 1rem;
}

/* Project Funding Section Styles */
.project-funding-section {
    background-color: white;
    padding: 4rem 0;
}

.project-funding-subtitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #007bff;
    margin-bottom: 0.5rem;
}

.project-funding-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #333;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.project-funding-description {
    font-size: 1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 500px;
}

.project-funding-description strong {
    font-weight: 700;
    color: #333;
}

.project-funding-btn {
    background-color: #ff7f50;
    border-color: #ff7f50;
    color: white;
    padding: 1rem 2.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.project-funding-btn:hover {
    background-color: #e66738;
    border-color: #e66738;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.phone-mockup {
    width: 100%;
    max-width: 250px;
    height: auto;
    border-radius: 1.5rem;
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    margin: 0 auto;
    display: block;
}

/* Final Call to Action Section Styles */
.final-cta-section {
    background-image: url('../images/starry-sky-town.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    padding: 12rem 1rem;
    text-align: center;
    color: white;
    overflow: hidden;
}

.final-cta-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 127, 80, 0.7);
    z-index: 1;
}

.final-cta-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 1rem;
}

.final-cta-title {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.final-cta-description {
    font-size: 1.1rem;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.final-cta-btn {
    background-color: #ff7f50;
    border-color: #ff7f50;
    color: white;
    padding: 1rem 3rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.final-cta-btn:hover {
    background-color: #e66738;
    border-color: #e66738;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.scroll-to-top-arrow {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.scroll-to-top-arrow:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Enhanced Footer Section Styles */
.footer-section {
    background-color: #212529;
    /* Darker background to match form section */
    color: #adb5bd;
    /* Lighter text for readability */
    padding: 4rem 0 2rem 0;
    margin-top: auto;
    /* Pushes footer to the bottom */
}

.footer-section .footer-brand {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.footer-section .footer-brand-tagline {
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 250px;
}

.footer-section h5 {
    color: white;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 1rem;
}

.footer-section .footer-links {
    list-style: none;
    padding-left: 0;
}

.footer-section .footer-links li {
    margin-bottom: 0.75rem;
}

.footer-section .footer-links a {
    color: #adb5bd;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-section .footer-links a:hover {
    color: #ff7f50;
    /* Accent color on hover */
    padding-left: 5px;
}

.footer-section .social-icons {
    list-style: none;
    padding-left: 0;
    display: flex;
    gap: 1rem;
}

.footer-section .social-icons a {
    color: #adb5bd;
    font-size: 1.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-section .social-icons a:hover {
    color: white;
    transform: scale(1.1);
}

.footer-section .footer-bottom {
    border-top: 1px solid #343a40;
    padding-top: 1.5rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Quote Form Section Styles */
.quote-form-section {
    background: linear-gradient(160deg, #fff 0%, #2c3138 100%);
    padding: 4rem 0;
    color: #e9ecef;
}

.quote-form-section .card {
    background-color: #212529;
    /* bg-dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2.5rem;
}

.quote-form-section .form-title {
    color: white;
    font-weight: 800;
    margin-bottom: 2rem;
}

.quote-form-section .progress {
    height: 0.75rem;
    background-color: #495057;
    /* A dark gray for the track */
    margin-bottom: 3rem !important;
}

.quote-form-section .progress-bar {
    background-color: #ff7f50;
    /* Orange for progress */
}

.quote-form-section .form-step h3 {
    color: white;
    font-weight: 700;
    margin-bottom: 2rem;
}

.quote-form-section .form-label {
    color: #adb5bd;
    /* Lighter gray for labels */
    font-weight: 500;
}

.quote-form-section .form-control,
.quote-form-section .form-select {
    background-color: #343a40;
    border: 1px solid #495057;
    color: white;
    padding: 0.75rem 1.25rem;
}

.quote-form-section .form-control::placeholder {
    color: #6c757d;
}

.quote-form-section .form-control:focus,
.quote-form-section .form-select:focus {
    background-color: #343a40;
    color: white;
    border-color: #20c997;
    /* Green focus color */
    box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25);
}

.quote-form-section .form-check-label {
    color: #e9ecef;
}

.btn-form-next {
    background-color: #ff7f50;
    border-color: #ff7f50;
    color: white;
    font-weight: 700;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-form-next:hover {
    background-color: #e66738;
    border-color: #e66738;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(255, 127, 80, 0.3);
}

.btn-form-back {
    background-color: transparent;
    border: 1px solid #495057;
    color: #adb5bd;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.btn-form-back:hover {
    background-color: #343a40;
    color: white;
    border-color: #6c757d;
}

.quote-form-section .alert-success {
    background-color: rgba(32, 201, 151, 0.1);
    border-color: rgba(32, 201, 151, 0.3);
    color: #20c997;
}

/* Modal Customization */
.pre-qualify-modal .modal-content {
    border-radius: 1rem;
    border: none;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175);
    background-color: #f8f9fa;
}

.pre-qualify-modal .modal-header {
    background-color: #343a40;
    color: white;
    border-bottom: 4px solid #ff7f50;
    /* Orange accent */
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    padding: 1.5rem;
}

.pre-qualify-modal .modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.pre-qualify-modal .modal-title {
    font-weight: 700;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

.pre-qualify-modal .modal-body {
    padding: 2rem;
}

.pre-qualify-modal .modal-body .form-label {
    font-weight: 600;
    color: #495057;
}

.pre-qualify-modal .modal-body .form-control:focus {
    border-color: #20c997;
    box-shadow: 0 0 0 0.25rem rgba(32, 201, 151, 0.25);
}

.pre-qualify-modal .modal-footer {
    background-color: #e9ecef;
    border-top: none;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    justify-content: flex-end;
    /* Align buttons to the right */
    gap: 0.75rem;
    /* Space between buttons */
}

.btn-submit-funding {
    background-color: #20c997;
    /* Green */
    border-color: #1aa67c;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 0 15px rgba(255, 127, 80, 0.7);
    /* Orange Glow */
    transition: all 0.3s ease;
}

.btn-submit-funding:hover {
    background-color: #1aa67c;
    border-color: #178b6b;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(255, 127, 80, 1);
    /* Brighter Orange Glow */
}

.btn-cancel-funding {
    background-color: #343a40;
    /* Black/Dark */
    border-color: #343a40;
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
}

.btn-cancel-funding:hover {
    background-color: #23272b;
    border-color: #1d2124;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 3.5rem;
    }

    .hero-subtitle {
        font-size: 0.95rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .hero-btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
        display: block;
        margin-left: 0 !important;
        margin-bottom: 1rem;
    }

    .hero-btn-secondary {
        margin-top: 1rem;
    }

    .price-display {
        position: relative;
        margin-top: 2rem;
        width: 100%;
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1rem;
        /* Space for the caret */
    }

    .hero-content {
        text-align: center;
    }

    .project-funding-section .row {
        flex-direction: column-reverse;
    }

    .project-funding-section .col-md-6 {
        text-align: center;
    }

    .project-funding-description {
        margin-left: auto;
        margin-right: auto;
    }

    .phone-mockup {
        margin-bottom: 2rem;
    }
}
 

/* Service Cards Animation */
.bg-animation-red-blue-green {
    background: linear-gradient(269deg, red, #f8a201, #47f400, #006bf4, #2c00f4, #ee00f4, #ee00f4, #f40000);
    background-size: 1600% 1600%;
    -o-animation: 7s infinite bg-animation-red-blue-green;
    -webkit-animation: 7s infinite bg-animation-red-blue-green;
    -moz-animation: 7s infinite bg-animation-red-blue-green;
    animation: 7s infinite bg-animation-red-blue-green
}

@-webkit-keyframes bg-animation-red-blue-green {

    0%,
    100% {
        background-position: 0 92%
    }

    50% {
        background-position: 100% 9%
    }
}

@-moz-keyframes bg-animation-red-blue-green {

    0%,
    100% {
        background-position: 0 92%
    }

    50% {
        background-position: 100% 9%
    }
}

@-o-keyframes bg-animation-red-blue-green {

    0%,
    100% {
        background-position: 0 92%
    }

    50% {
        background-position: 100% 9%
    }
}

@keyframes bg-animation-red-blue-green {

    0%,
    100% {
        background-position: 0 92%
    }

    50% {
        background-position: 100% 9%
    }
}


.bg-animation-blue-light-blue-dark {
    color: #FFFFFF;
    background: linear-gradient(180deg,
            #081584 0%,
            #2a3db8 10%,
            #4c6ce3 30%,
            #6a8aff 50%,
            #4c6ce3 70%,
            #2a3db8 90%,
            #081584 100%);
    background-size: 100% 300%;
    animation: bg-animation-blue-light-blue-dark 20s linear infinite;
    padding: 50px 0px 100px 0px;

    /* Browser Compatibility */
    -webkit-animation: bg-animation-blue-light-blue-dark 20s linear infinite;
    -moz-animation: bg-animation-blue-light-blue-dark 20s linear infinite;
    -o-animation: bg-animation-blue-light-blue-dark 20s linear infinite;
}

/* Keyframes for the gradient animation */
@keyframes bg-animation-blue-light-blue-dark {
    0% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

/* Vendor-prefixed keyframes */
@-webkit-keyframes bg-animation-blue-light-blue-dark {
    0% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}

@-moz-keyframes bg-animation-blue-light-blue-dark {
    0% {
        background-position: 100% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 100% 0%;
    }
}


.background-gradient-cyan-white {
    background: #0dcaf0;
    /* Fallback for old browsers */
    background: -webkit-linear-gradient(top, #0dcaf0, #C0FFFF);
    /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(top, #0dcaf0, #C0FFFF);
    /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(top, #0dcaf0, #C0FFFF);
    /* For Firefox 3.6 to 15 */
    background: linear-gradient(to bottom, #0dcaf0, #C0FFFF);
    /* Standard syntax */
}


.bg-animation-red-to-green {
    background: linear-gradient(269deg, #f81313, #6bf407, #ff7900, #e71111);
    background-size: 800% 800%;
    -webkit-animation: bg_animation_red_to_green 29s ease infinite;
    -moz-animation: bg_animation_red_to_green 29s ease infinite;
    -o-animation: bg_animation_red_to_green 29s ease infinite;
    animation: bg_animation_red_to_green 29s ease infinite
}

@-webkit-keyframes bg_animation_red_to_green {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 51%
    }

    100% {
        background-position: 0 50%
    }
}

@-moz-keyframes bg_animation_red_to_green {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 51%
    }

    100% {
        background-position: 0 50%
    }
}

@-o-keyframes bg_animation_red_to_green {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 51%
    }

    100% {
        background-position: 0 50%
    }
}

@keyframes bg_animation_red_to_green {
    0% {
        background-position: 0 50%
    }

    50% {
        background-position: 100% 51%
    }

    100% {
        background-position: 0 50%
    }
}



.page-anim-4 { animation: fadeInUp 0.8s forwards; animation-delay: 1.4s; }
.page-anim-5 { animation: fadeInUp 0.8s forwards; animation-delay: 1.8s; }

/* Section reveals disabled globally to prevent visual shifts and exposure gaps revealing fixed backgrounds */
section:not(.hero-section):not(.over_panel):not([class*="-hero"]) {
    opacity: 1;
    transform: none;
}
section.is-visible:not(.hero-section):not(.over_panel):not([class*="-hero"]) {
    opacity: 1 !important;
    transform: none !important;
}

/* ── REUSABLE HELPER CLASSES FROM INLINE STYLES ── */
.ab-section-white-px {
    padding: 2.5rem 0;
}

.ab-star-icon {
    font-size: 1rem;
    color: var(--ab-amber);
    margin-left: 3px;
}

.ab-narrative-p {
    color: #374151;
    line-height: 1.85;
}

.ab-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #374151;
}

.ab-feature-item-sm {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
}

.ab-icon-green {
    color: var(--ab-green);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ab-icon-orange {
    color: var(--ab-orange);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.ab-expect-box {
    background: var(--ab-light);
    border-color: var(--ab-border) !important;
}

.ab-expect-box h5 {
    font-weight: 900;
    color: #1a1f2e;
    margin-bottom: 1rem;
}

.ab-expect-box h5 i {
    color: var(--ab-orange);
    margin-right: 0.5rem;
}

.ab-expect-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: #374151;
    padding: 0.35rem 0;
}

.ab-expect-item i {
    color: var(--ab-orange);
    flex-shrink: 0;
}

.ab-label-amber {
    color: var(--ab-amber) !important;
}

.ab-grid-gap-sm {
    display: grid;
    gap: 0.65rem;
}

.ab-arrow-icon-right {
    font-size: 0.85rem;
    opacity: 0.6;
}

/* ── TRANSLUCENT PROMISE CARDS & CALLOUTS ── */
.ab-promise-card-dark {
    background: rgba(8, 14, 28, 0.8) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ab-promise-card-navy {
    background: rgba(13, 27, 62, 0.8) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 106, 26, 0.3) !important;
}

.ab-callout-card {
    background: rgba(8, 14, 28, 0.8) !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.ab-callout-bubble {
    position: absolute;
    top: -30%;
    right: -5%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 106, 26, 0.15), transparent 65%);
    pointer-events: none;
}

.ab-callout-inner {
    position: relative;
    z-index: 1;
}

.ab-callout-icon {
    font-size: 2.5rem;
    color: var(--ab-orange);
    margin-bottom: 1rem;
    display: block;
}

.ab-callout-title {
    font-weight: 900;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.ab-callout-p {
    color: rgba(255, 255, 255, 0.78);
    max-width: 640px;
    margin: 0 auto 1.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

.ab-callout-trust-item {
    color: rgba(255, 255, 255, 0.85);
}

.ab-callout-trust-item i {
    color: var(--ab-amber);
}

.ab-contact-title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 900;
    color: #fff;
    margin: 0.4rem 0 0.8rem;
    letter-spacing: -0.5px;
}

.ab-contact-lead {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.05rem;
    max-width: 560px;
    margin: 0;
    line-height: 1.8;
}

.ab-contact-info-link {
    font-size: 0.88rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7) !important;
}

.ab-contact-info-link i {
    color: var(--ab-amber);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SITEWIDE NAVIGATION & FLOATING WIDGET Z-INDEX CORRECTION
   ─────────────────────────────────────────────────────────────────────────────
   Resolves layout collisions where '.drone-interact' (10002) and active drone 
   flight elements overlap fixed/sticky header navigation bars and floating buttons.
*/

/* Desktop & Mobile Main Navigation Header Bars & Bottom Bars */
#desktopMegaMenu,
#desktopMegaMenu .mega-menu,
.navbar,
.mega-menu-wrapper,
header.position-fixed,
header.position-sticky,
.mobile-top-bar,
.mobile-bottom-bar {
    z-index: 25000 !important;
}

.mobile-menu-sheet {
    z-index: 25001 !important;
}

/* Floating interactive widgets (e.g. Circular Bottom-Right Action Buttons) */
.message_bar {
    z-index: 28000 !important;
}

/* Fullscreen overlays & estimate request modal forms */
#estimateFormSection,
.estimate-form-container {
    z-index: 35000 !important;
}



/* ── Section Gap Utilities ── */
.mt-gap-100 { margin-top: 100px; }
.mt-gap-150 { margin-top: 150px; }
.mt-gap-200 { margin-top: 200px; }

/* ── Text Shadow Utility ── */
.text-shadow { text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }