.HeadingBGImage {
    background-image: url('/resources/images/backgroundimages/927124224_02.jpg');
    min-height: 400px;
    background-attachment: fixed;
    background-position: center -150px;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0px;
    margin: 0px;
}


/* ─────────────────────────────────────────────────────────────────
       1) Sticky behavior for desktop/tablet (md+). 
       2) Mobile drawer styles in CSS.
       ───────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* Make the .estimate-sidebar container “sticky” */
    .estimate-sidebar.sticky {
        position: sticky;
        top: calc(70px + 1rem);
    }
}

/* ------------------------------------------------------
   MOBILE DRAWER: pin to bottom and let “collapse” expand up
   ------------------------------------------------------ */
#mobileEstimateDrawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 60px; /* sit right above the 60px-tall bottom bar */
    max-height: 70vh; /* same as before, but now it’s fixed */
    overflow-y: auto;
    z-index: 1050;
    /* Ensure when “.collapse” is hidden, height = 0 */
    height: 0;
    transition: height 0.3s ease; /* ease the “growing” effect */
}

    /* When Bootstrap adds “show” to the collapse, height:auto overrides height:0 */
    #mobileEstimateDrawer.collapse.show {
        height: auto;
    }

/* Bottom bar stays fixed at the very bottom */
.mobile-bottom-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: var(--rtg-light-pink);
    color: black;
    z-index: 1040;
    cursor: pointer;
}

/* Ensure every <h3> inside a .card-header uses Playfair Display */
.card-header h3 {
    font-family: 'Playfair Display', serif;
    margin: 0;
    padding-top: 0.5rem;
}