/* ========== RESTORED WORKING CUSTOM.CSS + PHONE LINK FIXES + HVAC BANNER ========== */
/* Starting from your working phone/hamburger functionality + bulletproof phone fixes */

/* ========== 1. CONTACT FORM STYLES (UPDATED FOR MODULE ID 154) ========== */

/* NUCLEAR OPTION - Force contact form text white (exclude aligned-contact-form) */
.container > .row:nth-child(3) *:not(.aligned-contact-form):not(.aligned-contact-form *),
#mod-rscontact-container-154 *:not(.aligned-contact-form):not(.aligned-contact-form *) {
color: #ffffff !important;
}

.container > .row:nth-child(3) h1:not(.aligned-contact-form h1),
.container > .row:nth-child(3) h2:not(.aligned-contact-form h2),
.container > .row:nth-child(3) h3:not(.aligned-contact-form h3),
.container > .row:nth-child(3) h4:not(.aligned-contact-form h4),
#mod-rscontact-container-154 h1:not(.aligned-contact-form h1),
#mod-rscontact-container-154 h2:not(.aligned-contact-form h2),
#mod-rscontact-container-154 h3:not(.aligned-contact-form h3),
#mod-rscontact-container-154 h4:not(.aligned-contact-form h4) {
color: #ffffff !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
text-shadow: none !important;
margin-top: -1px !important;
margin-bottom: 5px !important;
}

.container > .row:nth-child(3) label:not(.aligned-contact-form label),
#mod-rscontact-container-154 label:not(.aligned-contact-form label) {
color: #ffffff !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
text-shadow: none !important;
}

/* Our main contact form - aligned-contact-form class */
.aligned-contact-form {
padding: 0px !important;
margin: 0px !important;
max-width: 329px !important;
width: 100% !important;
background: transparent !important;
margin-left: 0px !important;
margin-top: -8px !important;
position: relative !important;
z-index: 999 !important;
}

.aligned-contact-form h1,
.aligned-contact-form h2,
.aligned-contact-form h3,
.aligned-contact-form h4 {
color: #ffffff !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
text-shadow: none !important;
margin: 10px 0 6px 20px !important;
padding: 0px !important;
line-height: 1.1 !important;
font-size: 22px !important;
text-align: left !important;
text-transform: uppercase !important;
}

.aligned-contact-form form {
margin: 0px !important;
padding: 0px !important;
}

.aligned-contact-form label {
color: #ffffff !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
margin: 5px 0 2px 0 !important;
display: block !important;
line-height: 1.1 !important;
font-size: 12px !important;
padding-top: 1px !important;
}

.aligned-contact-form input[type="text"],
.aligned-contact-form input[type="email"],
.aligned-contact-form input[type="tel"],
.aligned-contact-form select {
margin: 0 0 5px 0 !important;
padding: 6px !important;
width: 100% !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
font-size: 12px !important;
height: 28px !important;
box-sizing: border-box !important;
background: white !important;
color: #333333 !important;
}

.aligned-contact-form textarea {
min-height: 45px !important;
margin: 0 0 5px 0 !important;
padding: 6px !important;
resize: vertical !important;
width: 100% !important;
border: 1px solid #ccc !important;
border-radius: 3px !important;
font-size: 12px !important;
box-sizing: border-box !important;
background: white !important;
color: #333333 !important;
}

.aligned-contact-form .control-group,
.aligned-contact-form .controls,
.aligned-contact-form .form-group,
.aligned-contact-form .rsform-block,
.aligned-contact-form .row {
margin: 0 0 2px 0 !important;
padding: 0 0 1px 0 !important;
}

.aligned-contact-form .captcha,
.aligned-contact-form [class*="captcha"] {
margin: 3px 0 !important;
padding: 1px 0 !important;
}

/* Contact form container positioning */
.container > .row:nth-child(3) > [class*="col-"]:nth-child(3) {
padding: 0 5px 0 20px !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
}

#mod-rscontact-container-154 {
margin-top: 0px !important;
padding-top: 0px !important;
width: 100% !important;
max-width: 349px !important;
margin-left: 20px !important;
position: relative !important;
z-index: 998 !important;
}

/* Contact form module alignment */
.container > .row:nth-child(3) > [class*="col-"]:nth-child(3),
.container > .row:nth-child(3) .col-md-4:nth-child(3) {
margin-top: 10px !important;
padding-top: 0px !important;
text-align: center !important;
padding-left: 5px !important;
padding-right: 15px !important;
display: flex !important;
justify-content: flex-start !important;
align-items: flex-start !important;
}

#mod-rscontact-container-154,
.rscontact {
margin-top: 4px !important;
padding-top: 0px !important;
margin-left: -30px !important;
margin-right: auto !important;
max-width: 400px !important;
width: 100% !important;
padding-bottom: 30px !important;
}

#mod-rscontact-container-154 form,
.rscontact form {
margin-left: auto !important;
margin-right: auto !important;
text-align: left !important;
padding-bottom: 5px !important;
}

/* ========== 2. CONTACT INFO BOX STYLING (UNCHANGED) ========== */

.contact-info {
background-color: white !important;
border: 5px solid #f72403 !important;
padding: 15px !important;
margin: 20px auto !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
max-width: 338px !important;
min-height: 300px !important;
text-align: center !important;
}

.contact-info h4 {
margin: 2px 0 !important;
line-height: 1.1 !important;
}

.contact-info span {
display: block !important;
margin-bottom: 1px !important;
}

.contact-info span[style*="font-size: 19pt"] {
font-weight: bold !important;
font-size: 30px !important;
color: #f72403 !important;
margin-bottom: 2px !important;
font-family: Arial, sans-serif !important;
line-height: 1.0 !important;
}

.contact-info span[style*="font-size: 15pt"] {
font-size: 21px !important;
color: #333300 !important;
line-height: 1.1 !important;
margin-bottom: 0px !important;
font-family: Arial, sans-serif !important;
}

.contact-info span[style*="font-size: 15pt"]:nth-child(3),
.contact-info span[style*="font-size: 15pt"]:nth-child(4) {
margin-bottom: -15px !important;
line-height: 0.7 !important;
}

.contact-info span[style*="font-size: 15pt"]:nth-child(6),
.contact-info span[style*="font-size: 15pt"]:nth-child(8) {
margin-bottom: -18px !important;
line-height: 0.6 !important;
}

.contact-info a[href^="tel:"] {
font-size: 30px !important;
color: #f72403 !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
margin-top: -18px !important;
display: block !important;
line-height: 0.9 !important;
}

.contact-info a[href^="mailto:"] {
font-size: 19px !important;
color: #f72403 !important;
font-family: Arial, sans-serif !important;
margin-top: -18px !important;
display: block !important;
line-height: 0.9 !important;
}

.contact-info a {
color: #f72403 !important;
text-decoration: none !important;
font-weight: bold !important;
transition: all 0.3s ease !important;
}

.contact-info a:hover {
text-decoration: underline !important;
transform: scale(1.05) !important;
}

/* BNC Plumbing Pro Box */
#mod-custom146 {
background-color: white !important;
border: 5px solid #f72403 !important;
padding: 15px 15px 0px 15px !important;
margin: 20px auto !important;
border-radius: 10px !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
text-align: center !important;
}

#mod-custom146 p:last-child {
margin-bottom: -12px !important;
padding-bottom: 0px !important;
}

#mod-custom146 p {
margin: 0 !important;
padding: 0 !important;
line-height: 1.1 !important;
}

#mod-custom146 a[href^="mailto:"] {
display: block !important;
margin: -5px 0 -10px 0 !important;
padding: 0 !important;
line-height: 1.0 !important;
}

#mod-custom146 h3 {
color: #f72403 !important;
font-family: Arial, sans-serif !important;
font-weight: bold !important;
font-size: 30px !important;
}

#mod-custom146 p,
#mod-custom146 strong {
color: #333300 !important;
font-family: Arial, sans-serif !important;
font-size: 21px !important;
font-weight: normal !important;
border: none !important;
}

#mod-custom146 * {
border: none !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}

/* ========== 3. DESKTOP LAYOUT & HEADER (UNCHANGED) ========== */

/* Hide unwanted module titles */
h2.rspbld-title {
display: none !important;
}

/* Desktop header navigation */
#rstpl-top-position .col-md-4:first-child {
width: 100% !important;
max-width: 100% !important;
flex: 1 1 100% !important;
padding: 0 !important;
}

.header-left img,
.logo-container img,
#rstpl-top-position img[src*="Logo"] {
height: auto !important;
max-height: 90px !important;
width: auto !important;
max-width: 300px !important;
}

.unified-header-container {
max-width: 1320px !important;
margin: 0 auto !important;
padding: 35px 20px 20px 20px !important;
background: transparent !important;
}

.header-flex-row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
width: 100% !important;
gap: 20px !important;
}

.header-left {
flex: 1 !important;
text-align: left !important;
min-width: 300px !important;
}

.header-center {
flex: 1 !important;
text-align: center !important;
min-width: 250px !important;
}

.header-right {
flex: 1 !important;
text-align: right !important;
min-width: 280px !important;
}

#rstpl-top-position .col-md-4:first-child .content {
padding: 0 !important;
margin: 0 !important;
}

/* Header spacing optimization */
section#rstpl-top-position {
margin-bottom: -10px !important;
padding: 10px 0 3px 0 !important;
}

section#rstpl-main-menu-position {
margin: -20px 0 -10px 0 !important;
padding: 0 !important;
}

section#rstpl-main-menu-position .navbar,
section#rstpl-main-menu-position .container-fluid,
section#rstpl-main-menu-position .container {
margin: 0 !important;
padding: 0 !important;
}

section#rstpl-all-content-position {
padding-top: 0px !important;
margin-top: -5px !important;
}

.page-content > .container > .row:first-child {
padding-top: 0px !important;
margin-top: -5px !important;
}

section[style*="background-color: rgb(151, 190, 217)"]:first-of-type,
section[style*="background-color: #97bdd9"]:first-of-type {
padding-top: 0px !important;
margin-top: -8px !important;
}

/* Row spacing optimization */
.container > .row:first-child {
padding: 10px 0 7px 0 !important;
margin-bottom: 3px !important;
}

.container .row + .row {
margin-top: 3px !important;
padding-top: 0px !important;
}

section + section {
margin-top: 3px !important;
}

/* Fix height for second box in first row */
.container > .row:first-child > [class*="col-"]:nth-child(2) .rspbld-image {
max-height: 280px !important;
overflow: hidden !important;
}

.container > .row:first-child > [class*="col-"]:nth-child(2) .rspbld-image img {
max-height: 280px !important;
object-fit: cover !important;
}

/* Row positioning */
.container > .row:nth-child(2) {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
gap: 20px !important;
margin: 0 auto !important;
max-width: 1200px !important;
overflow: hidden !important;
}

.container > .row:nth-child(2) > [class*="col-"] {
flex: 1 1 50% !important;
max-width: 50% !important;
min-width: 45% !important;
min-height: 450px !important;
display: flex !important;
flex-direction: column !important;
position: relative !important;
float: left !important;
}

.container > .row:nth-child(2) > [class*="col-"] > div {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
}

.container > .row:nth-child(2) .rspbld-image,
.container > .row:nth-child(2) .rspbld-image img {
width: 100% !important;
height: auto !important;
object-fit: cover !important;
max-height: 280px !important;
}

.container > .row:nth-child(2) .rspbld-content-container {
flex: 1 !important;
padding: 15px !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}

.container > .row:nth-child(3) {
margin-top: -10px !important;
padding-top: 0px !important;
}

.container > .row:nth-child(4) {
margin: 3px 0 -10px 0 !important;
padding: 0 !important;
}

.container > .row:nth-child(5) {
margin-top: -15px !important;
padding-top: 0px !important;
}

/* Blue background section optimization */
section[style*="background-color: rgb(151, 190, 217)"],
section[style*="background-color: #97bdd9"] {
padding: 0 !important;
margin: -3px 0 !important;
}

/* ========== 4. UNIFIED BUTTON STYLES (UNCHANGED) ========== */

/* Submit buttons (red) */
.aligned-contact-form button,
.aligned-contact-form input[type="submit"],
.aligned-contact-form .btn,
.container > .row:nth-child(3) button:not(.aligned-contact-form button),
.container > .row:nth-child(3) input[type="submit"]:not(.aligned-contact-form input[type="submit"]),
.container > .row:nth-child(3) .btn:not(.aligned-contact-form .btn),
#mod-rscontact-container-154 button:not(.aligned-contact-form button),
#mod-rscontact-container-154 input[type="submit"]:not(.aligned-contact-form input[type="submit"]),
#mod-rscontact-container-154 .btn:not(.aligned-contact-form .btn),
button#Submit:not(.aligned-contact-form button),
input[name*="submit"]:not(.aligned-contact-form input) {
background-color: #f72403 !important;
border-color: #f72403 !important;
color: white !important;
padding: 8px 16px !important;
border-radius: 3px !important;
font-weight: bold !important;
cursor: pointer !important;
margin: 2px 0 0 0 !important;
font-family: Arial, sans-serif !important;
border: none !important;
font-size: 12px !important;
width: 100% !important;
position: relative !important;
z-index: 999 !important;
}

.aligned-contact-form button:hover,
.aligned-contact-form input[type="submit"]:hover,
.aligned-contact-form .btn:hover {
background-color: #d61f02 !important;
border-color: #d61f02 !important;
color: white !important;
}

/* Homepage buttons (blue) */
.homepage-button-blue,
.container > .row:nth-child(2) a.rspbld-button.btn.btn-primary,
.container > .row:nth-child(2) .rspbld-button.btn.btn-primary,
.container > .row:nth-child(2) .btn.btn-primary,
.row.animation-container a.rspbld-button.btn.btn-primary,
div.col-md-6 a.rspbld-button.btn.btn-primary {
background-color: #0972f3 !important;
border-color: #0972f3 !important;
color: white !important;
border: 2px solid #0972f3 !important;
padding: 12px 24px !important;
border-radius: 8px !important;
font-weight: bold !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
font-family: Arial, sans-serif !important;
font-size: 16px !important;
display: inline-block !important;
margin: 10px auto !important;
background-image: none !important;
}

.homepage-button-blue:hover,
.container > .row:nth-child(2) a.rspbld-button.btn.btn-primary:hover,
.container > .row:nth-child(2) .rspbld-button.btn.btn-primary:hover,
.container > .row:nth-child(2) .btn.btn-primary:hover,
.row.animation-container a.rspbld-button.btn.btn-primary:hover,
div.col-md-6 a.rspbld-button.btn.btn-primary:hover {
background-color: #065bb3 !important;
border-color: #065bb3 !important;
color: white !important;
transform: scale(1.05) !important;
text-decoration: none !important;
background-image: none !important;
}

a.homepage-button-blue,
a.homepage-button-blue:hover {
color: white !important;
}

/* Button containers */
.rspbld-button-container,
.homepage-button-blue-container {
background-color: transparent !important;
background: none !important;
padding: 5px !important;
margin: 10px auto !important;
text-align: center !important;
display: block !important;
}

.container > .row:nth-child(2) .rspbld-button-container {
margin-top: auto !important;
position: relative !important;
bottom: auto !important;
left: auto !important;
right: auto !important;
transform: none !important;
}

.container > .row:nth-child(2) .homepage-button-blue {
margin: 0 auto !important;
padding: 12px 24px !important;
display: inline-block !important;
position: relative !important;
top: 0px !important;
}

.container > .row .homepage-button-blue {
margin: 8px auto !important;
vertical-align: top !important;
}

.container > .row:first-child .rspbld-button-container,
.container > .row:first-child .homepage-button-blue-container {
margin-top: -15px !important;
padding-top: 5px !important;
}

.container > .row:first-child.animation-container {
margin-top: -10px !important;
padding-top: 0px !important;
}

.container > .row:first-child .homepage-button-blue {
margin: 15px auto !important;
}

/* Remove unwanted blue backgrounds */
section[style*="background-color: #0972f3"],
section[style*="background-color:#0972f3"],
div[style*="background-color: #0972f3"],
div[style*="background-color:#0972f3"],
.rspbld-button-container.text-center,
.text-center[style*="background"],
section.rspbld-section[style*="background-color"] {
background-color: transparent !important;
background: none !important;
padding: 8px !important;
}

section.rspbld-section {
padding: 0 !important;
margin: -3px 0 !important;
}

/* Other input fields (not in aligned-contact-form) */
input:not(.aligned-contact-form input),
textarea:not(.aligned-contact-form textarea),
select:not(.aligned-contact-form select) {
width: 100% !important;
max-width: 350px !important;
min-width: 280px !important;
padding: 10px 15px !important;
border: 2px solid #ccc !important;
border-radius: 5px !important;
font-size: 16px !important;
margin-bottom: 12px !important;
box-sizing: border-box !important;
}

input[style]:not(.aligned-contact-form input),
textarea[style]:not(.aligned-contact-form textarea) {
width: 100% !important;
max-width: 350px !important;
min-width: 280px !important;
}

.contact-form:not(.aligned-contact-form),
form:not(.aligned-contact-form form),
.form-group:not(.aligned-contact-form .form-group),
div[class*="form"]:not(.aligned-contact-form) {
width: 100% !important;
}

input[size]:not(.aligned-contact-form input) {
width: 100% !important;
max-width: 350px !important;
size: auto !important;
}

/* ========== 5. NAVIGATION IMAGE HOVER EFFECTS (UNCHANGED) ========== */

/* Navigation Image Hover Effect - Slide Up + Underline */
.nav-image {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}

.nav-image:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* Animated underline */
.nav-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #f72403;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.nav-image:hover::after {
transform: scaleX(1);
}

/* Row 1 Image Spacing with Hover Effects */
.row1-image-spacing.nav-image {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}

.row1-image-spacing.nav-image:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.row1-image-spacing.nav-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #f72403;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.row1-image-spacing.nav-image:hover::after {
transform: scaleX(1);
}

/* Row 2 Image Spacing with Hover Effects */
.row2-image-spacing.nav-image {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}

.row2-image-spacing.nav-image:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.row2-image-spacing.nav-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #f72403;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.row2-image-spacing.nav-image:hover::after {
transform: scaleX(1);
}

/* Row 3-9 Image Spacing with Hover Effects */
.row3-image-spacing.nav-image,
.row4-image-spacing.nav-image,
.row5-image-spacing.nav-image,
.row6-image-spacing.nav-image,
.row7-image-spacing.nav-image,
.row8-image-spacing.nav-image,
.row9-image-spacing.nav-image {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}

.row3-image-spacing.nav-image:hover,
.row4-image-spacing.nav-image:hover,
.row5-image-spacing.nav-image:hover,
.row6-image-spacing.nav-image:hover,
.row7-image-spacing.nav-image:hover,
.row8-image-spacing.nav-image:hover,
.row9-image-spacing.nav-image:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.row3-image-spacing.nav-image::after,
.row4-image-spacing.nav-image:after,
.row5-image-spacing.nav-image::after,
.row6-image-spacing.nav-image::after,
.row7-image-spacing.nav-image::after,
.row8-image-spacing.nav-image::after,
.row9-image-spacing.nav-image::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 3px;
background: #f72403;
transform: scaleX(0);
transition: transform 0.3s ease;
}

.row3-image-spacing.nav-image:hover::after,
.row4-image-spacing.nav-image:hover::after,
.row5-image-spacing.nav-image:hover::after,
.row6-image-spacing.nav-image:hover::after,
.row7-image-spacing.nav-image:hover::after,
.row8-image-spacing.nav-image:hover::after,
.row9-image-spacing.nav-image:hover::after {
transform: scaleX(1);
}

/* ========== 6. MOBILE STYLES - RESTORED WORKING FUNCTIONALITY + PHONE FIXES ========== */

#custom-header-replacement {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
display: none;
}

/* ========== BULLETPROOF PHONE LINK FIXES - UNIVERSAL ========== */
a[href^="tel:"],
a[href^="tel:"] * {
pointer-events: auto !important;
position: relative !important;
z-index: 999999 !important;
cursor: pointer !important;
-webkit-tap-highlight-color: rgba(247, 36, 3, 0.3) !important;
-webkit-touch-callout: default !important;
-webkit-user-select: none !important;
touch-action: manipulation !important;
user-select: none !important;
outline: none !important;
overflow: visible !important;
}

a[href^="tel:"] span,
a[href^="tel:"] .mobile-phone-icon,
.mobile-phone-link span,
.mobile-phone-link .mobile-phone-icon {
pointer-events: none !important;
user-select: none !important;
}

/* UNIVERSAL MOBILE HEADER FIX */
@media screen and (max-width: 768px) {
#custom-header-replacement {
display: block !important;
}

#rstpl-top-position,
#rstpl-main-menu-position {
display: none !important;
}

.mobile-header-main {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
-webkit-box-align: center !important;
-webkit-align-items: center !important;
-webkit-box-pack: justify !important;
-webkit-justify-content: space-between !important;
background-color: #a2a0a0;
width: 100%;
padding: 8px 7px 8px 0px !important;
min-height: 55px !important;
max-height: 55px !important;
position: fixed !important;
top: 0 !important;
z-index: 9999 !important;
box-sizing: border-box !important;
}

.mobile-logo-container {
flex: 0 0 auto !important;
-webkit-box-flex: 0 !important;
-webkit-flex: 0 0 auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 55px !important;
box-sizing: border-box !important;
margin-left: 9px !important;
}

.mobile-logo-container img {
height: 52px !important;
max-width: 180px !important;
vertical-align: middle !important;
}

.mobile-phone-container {
flex: 1 1 auto !important;
-webkit-box-flex: 1 !important;
-webkit-flex: 1 1 auto !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
-webkit-box-pack: center !important;
-webkit-justify-content: center !important;
-webkit-box-align: center !important;
-webkit-align-items: center !important;
margin-left: 5px !important;
position: relative !important;
z-index: 9999 !important;
height: 55px !important;
box-sizing: border-box !important;
}

.mobile-phone-link,
.mobile-phone-container a,
.mobile-phone-container a[href^="tel:"],
a[href^="tel:"].mobile-phone-link,
div.mobile-phone-container a,
#custom-header-replacement a[href^="tel:"],
.mobile-header-main a[href^="tel:"] {
display: flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-align-items: center !important;
-webkit-justify-content: center !important;
text-decoration: none !important;
color: #f72403 !important;
padding: 0 8px !important;
cursor: pointer !important;
position: relative !important;
z-index: 999999 !important;
background: transparent !important;
border: none !important;
outline: none !important;
pointer-events: auto !important;
height: 100% !important;
box-sizing: border-box !important;
-webkit-tap-highlight-color: rgba(247, 36, 3, 0.3) !important;
-webkit-touch-callout: default !important;
-webkit-user-select: none !important;
touch-action: manipulation !important;
user-select: none !important;
overflow: visible !important;
box-shadow: none !important;
text-shadow: none !important;
}

.mobile-phone-link:hover,
.mobile-phone-link:active,
.mobile-phone-link:focus,
.mobile-phone-container a:hover,
.mobile-phone-container a:active,
.mobile-phone-container a:focus,
a[href^="tel:"].mobile-phone-link:hover,
a[href^="tel:"].mobile-phone-link:active,
a[href^="tel:"].mobile-phone-link:focus,
#custom-header-replacement a[href^="tel:"]:hover,
#custom-header-replacement a[href^="tel:"]:active,
#custom-header-replacement a[href^="tel:"]:focus {
background-color: rgba(247, 36, 3, 0.15) !important;
color: #f72403 !important;
text-decoration: none !important;
transform: scale(1.1) !important;
transition: all 0.2s ease !important;
}

.mobile-phone-icon,
.mobile-phone-container span,
.mobile-phone-container .mobile-phone-icon,
#custom-header-replacement .mobile-phone-icon,
.mobile-header-main .mobile-phone-icon {
font-size: 24px !important;
color: #f72403 !important;
line-height: 1 !important;
display: block !important;
text-align: center !important;
pointer-events: none !important;
user-select: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}

.mobile-hamburger-label {
flex: 0 0 auto !important;
-webkit-box-flex: 0 !important;
-webkit-flex: 0 0 auto !important;
font-size: 22px !important;
background: none !important;
border: none !important;
color: #000000 !important;
text-shadow: 0px 0px 1px #000000 !important;
padding: 8px !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-webkit-align-items: center !important;
-webkit-box-pack: center !important;
-webkit-justify-content: center !important;
min-width: 48px !important;
min-height: 48px !important;
height: 55px !important;
box-sizing: border-box !important;
transform: translateX(-4px) !important;
-webkit-transform: translateX(-4px) !important;
}

.mobile-hamburger-icon {
font-size: 22px !important;
line-height: 1 !important;
display: block !important;
}

#mobile-menu-toggle {
display: none;
}

#mobile-menu-dropdown {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
border-top: 2px solid #d32f2f;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: all 0.3s ease;
z-index: 99999 !important;
pointer-events: none;
}

#mobile-menu-toggle:checked ~ #mobile-menu-dropdown {
max-height: 70vh !important;
opacity: 1 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
pointer-events: auto !important;
}

.mobile-menu-link {
display: block !important;
padding: 15px 20px !important;
text-decoration: none !important;
color: #333 !important;
border-bottom: 1px solid #eee !important;
font-size: 16px !important;
font-weight: 500 !important;
transition: background-color 0.3s ease !important;
position: relative !important;
background-color: #ffffff !important;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 10000 !important;
}

.mobile-menu-link:hover {
background-color: #f8f8f8 !important;
color: #d32f2f !important;
text-decoration: none !important;
}

.mobile-menu-link:last-child {
border-bottom: none !important;
}

.mobile-submenu-link {
display: block !important;
padding: 12px 25px !important;
text-decoration: none !important;
color: #555 !important;
border-bottom: 1px solid #ddd !important;
font-size: 14px !important;
transition: background-color 0.3s ease !important;
background-color: #f8f8f8 !important;
border-left: 4px solid #d32f2f !important;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 10000 !important;
}

.mobile-submenu-link:hover {
background-color: #e9e9e9 !important;
color: #d32f2f !important;
text-decoration: none !important;
}

.mobile-submenu-link:last-child {
border-bottom: none !important;
}

.mobile-sub-submenu-link {
display: block !important;
padding: 10px 35px !important;
text-decoration: none !important;
color: #666 !important;
border-bottom: 1px solid #ccc !important;
font-size: 13px !important;
background-color: #eeeeee !important;
border-left: 6px solid #d32f2f !important;
cursor: pointer !important;
pointer-events: auto !important;
z-index: 10000 !important;
}

.mobile-sub-submenu-link:hover {
background-color: #e0e0e0 !important;
color: #d32f2f !important;
text-decoration: none !important;
}

body {
padding-top: 70px !important;
}

#mobile-header-spacer {
height: 70px !important;
}

section[style*="background-color: rgb(151, 190, 217)"],
section[style*="background-color: #97bdd9"] {
padding-top: 0px !important;
padding-bottom: 3px !important;
margin-top: -12px !important;
margin-bottom: -8px !important;
}

section#rstpl-all-content-position {
margin-top: -15px !important;
padding-top: 2px !important;
}

.page-content .container {
padding-top: 2px !important;
margin-top: -12px !important;
}

.container > .row:first-child {
margin-top: -15px !important;
padding-top: 2px !important;
padding-bottom: 5px !important;
}

.container > .row {
margin-top: -3px !important;
margin-bottom: -2px !important;
padding-bottom: 8px !important;
}

body.com_content.view-article section#rstpl-all-content-position,
body[class*="residential-plumbing"] section#rstpl-all-content-position,
body[class*="contact"] section#rstpl-all-content-position,
body[class*="itemid-106"] section#rstpl-all-content-position,
body[class*="about"] section#rstpl-all-content-position,
body[class*="itemid-105"] section#rstpl-all-content-position,
body[class*="promotions"] section#rstpl-all-content-position,
body[class*="financing"] section#rstpl-all-content-position,
body:not(.com_content.view-featured):not([class*="itemid-101"]) section#rstpl-all-content-position {
margin-top: -15px !important;
padding-top: 2px !important;
}

body.com_content.view-article .container > .row:first-child,
body[class*="residential-plumbing"] .container > .row:first-child,
body[class*="contact"] .container > .row:first-child,
body[class*="itemid-106"] .container > .row:first-child,
body[class*="about"] .container > .row:first-child,
body[class*="itemid-105"] .container > .row:first-child,
body[class*="promotions"] .container > .row:first-child,
body[class*="financing"] .container > .row:first-child,
body:not(.com_content.view-featured):not([class*="itemid-101"]) .container > .row:first-child {
margin-top: -15px !important;
padding-top: 2px !important;
}

body, body *, section, div, img {
border-top: none !important;
border-bottom: none !important;
}

*[style*="border-top"],
*[style*="border-bottom"],
*[style*="border: "] {
border-top: none !important;
border-bottom: none !important;
}

.container > .row:nth-child(2) {
flex-direction: column !important;
}

.container > .row:nth-child(2) > [class*="col-"] {
flex: 1 1 100% !important;
max-width: 100% !important;
min-width: 100% !important;
}

.aligned-contact-form {
max-width: 250px !important;
margin: 10px auto !important;
margin-left: 0px !important;
}

.container > .row:nth-child(3) > [class*="col-"]:nth-child(3) {
padding-left: 15px !important;
padding-right: 15px !important;
text-align: center !important;
}

.rspbld-image img,
.container > .row .rspbld-image img,
.container > .row > [class*="col-"] .rspbld-image img,
section[style*="background-color"] img {
margin-bottom: 5px !important;
}

.rspbld-image,
.container .rspbld-image,
[class*="image-container"] {
margin-bottom: 5px !important;
padding-bottom: 2px !important;
}

.container > .row > [class*="col-"] {
margin-bottom: 5px !important;
padding-bottom: 3px !important;
}

.container > .row + .row {
margin-top: 3px !important;
}

.rspbld-content-container {
padding: 15px 10px 5px 10px !important;
}

.row1-image-spacing {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.row1-image-spacing .rspbld-image,
.row1-image-spacing .rspbld-content-container {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.row2-image-spacing {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.row.animation-container {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.row.animation-container > .col-md-6 {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

.row.animation-container .col-md-6[class*="mb-"],
.row.animation-container [class*="mb-"] {
margin-bottom: 0px !important;
}

.row3-image-spacing,
.row4-image-spacing,
.row5-image-spacing,
.row6-image-spacing,
.row7-image-spacing,
.row8-image-spacing,
.row9-image-spacing {
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}

body:not([class*="itemid-101"]):not(.view-featured) section:first-of-type {
padding-top: 30px !important;
}

body[class*="itemid-101"] section:first-of-type,
body.view-featured section:first-of-type {
padding-top: 0px !important;
margin-top: -8px !important;
}
}

@media (max-width: 576px) {
body {
padding-top: 70px !important;
}

.container {
padding: 0 5px;
}

section[style*="background-color: rgb(151, 190, 217)"],
section[style*="background-color: #97bdd9"] {
margin-top: -15px !important;
padding-top: 0px !important;
margin-bottom: -10px !important;
}

#mobile-header-spacer {
height: 70px !important;
}
}

@media screen and (min-width: 769px) {
#custom-header-replacement {
display: none !important;
}
}

.mobile-phone-container a[href^="tel:"] {
all: unset !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #d32f2f !important;
cursor: pointer !important;
padding: 0 8px !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
z-index: 999999 !important;
position: relative !important;
pointer-events: auto !important;
touch-action: auto !important;
-webkit-touch-callout: default !important;
-webkit-user-select: auto !important;
user-select: auto !important;
-webkit-tap-highlight-color: rgba(247, 36, 3, 0.3) !important;
height: 100% !important;
box-sizing: border-box !important;
}

.mobile-phone-container a[href^="tel:"] i {
pointer-events: none !important;
color: #d32f2f !important;
font-size: 24px !important;
}

@-moz-document url-prefix() {
    .mobile-phone-container a[href^="tel:"] {
        all: revert !important;
        display: inline-block !important;
        color: #d32f2f !important;
        cursor: pointer !important;
        padding: 8px !important;
        pointer-events: auto !important;
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    .mobile-phone-container a[href^="tel:"] i {
        pointer-events: none !important;
        color: #d32f2f !important;
        font-size: 24px !important;
    }
    
    a[href^="tel:"]:not(.mobile-phone-container a):not(.mobile-phone-link):not([class*="rsmp"]):not([class*="skitter"]):not([class*="slider"]) {
        color: inherit !important;
        text-decoration: none !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        display: inline !important;
    }
    
    @media screen and (max-width: 768px) {
        body {
            padding-top: 60px !important;
        }
    }
}

/* ========== 7. ACORN FINANCE BANNER ========== */
#acorn-logo-wrapper {
text-align: center !important;
width: 100% !important;
margin: 0 auto !important;
padding: 5px 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}

#acornBanner,
img#acornBanner,
.acorn-image {
max-width: 280px !important;
width: auto !important;
height: auto !important;
margin: 5px auto !important;
display: block !important;
padding: 1px !important;
border: 1px solid black !important;
border-radius: 5px !important;
box-sizing: border-box !important;
}

#acorn-logo-wrapper a {
border: none !important;
outline: none !important;
text-decoration: none !important;
display: inline-block !important;
}

@media screen and (max-width: 768px) {
#acorn-logo-wrapper {
padding: 3px 10px !important;
}

#acornBanner,
img#acornBanner,
.acorn-image {
max-width: 220px !important;
margin: 3px auto !important;
}
}

@media screen and (max-width: 480px) {
#acorn-logo-wrapper {
padding: 3px !important;
}

#acornBanner,
img#acornBanner,
.acorn-image {
max-width: 95% !important;
margin: 3px auto !important;
}
}

/* ========== 8. CENTER BUTTONS IN IMAGE BLOCKS ========== */
.rspbld-horizontal-image-box .rspbld-content-container,
.rspbld-horizontal-image-box .rspbld-content {
text-align: center !important;
}

.rspbld-horizontal-image-box .rspbld-button.btn.btn-primary {
margin: 10px auto !important;
display: inline-block !important;
text-align: center !important;
}

.rspbld-horizontal-image-box .rspbld-button-container {
text-align: center !important;
margin: 0 auto !important;
display: block !important;
}

@media screen and (max-width: 768px) {
.rspbld-horizontal-image-box .rspbld-content-container,
.rspbld-horizontal-image-box .rspbld-content {
text-align: center !important;
}

.rspbld-horizontal-image-box .rspbld-button.btn.btn-primary {
margin: 8px auto !important;
display: block !important;
width: auto !important;
max-width: 250px !important;
}
}

/* ========== 9. MOBILE MAP FIX ========== */
.mobile-map-fix {
width: 100% !important;
max-width: 100% !important;
overflow: hidden !important;
text-align: center !important;
padding: 0 10px !important;
box-sizing: border-box !important;
}

.mobile-map-fix iframe {
width: 100% !important;
max-width: 320px !important;
height: 280px !important;
margin: 0 auto !important;
display: block !important;
border: 0 !important;
}

@media screen and (max-width: 393px) {
.mobile-map-fix iframe {
max-width: 300px !important;
height: 250px !important;
}
}

@media screen and (max-width: 350px) {
.mobile-map-fix iframe {
max-width: 280px !important;
height: 230px !important;
}
}

iframe[src*="google.com/maps/embed"] {
width: 100% !important;
max-width: 320px !important;
height: 280px !important;
margin: 0 auto !important;
display: block !important;
border: 0 !important;
}

@media screen and (max-width: 393px) {
iframe[src*="google.com/maps/embed"] {
max-width: 300px !important;
height: 250px !important;
}
}

@media screen and (max-width: 350px) {
iframe[src*="google.com/maps/embed"] {
max-width: 280px !important;
height: 230px !important;
}
}

/* ========== 9.5. SERVICE AREA MAP - MOBILE ONLY FIXES ========== */
@media (max-width: 768px) {
    img[src*="service-area-map-finalwbracket.jpg"],
    img[src*="service-area-map"],
    img[src*="finalwbracket"],
    img[src*="/images/text-blocks-illustrator/service-area-map-finalwbracket.jpg"],
    .service-area img,
    .service-map img,
    img[src*="/images/text-blocks-illustrator/"] {
        width: 100% !important;
        height: auto !important;
        max-width: 600px !important;
        margin: 20px auto !important;
        display: block !important;
    }
}

@media (max-width: 480px) {
    img[src*="service-area-map-finalwbracket.jpg"],
    img[src*="service-area-map"],
    img[src*="finalwbracket"],
    img[src*="/images/text-blocks-illustrator/service-area-map-finalwbracket.jpg"],
    .service-area img,
    .service-map img,
    img[src*="/images/text-blocks-illustrator/"] {
        width: 100% !important;
        height: auto !important;
        max-width: none !important;
        margin: 15px auto !important;
        display: block !important;
    }
}

/* ========== 10. FINAL FIX - BOTH BROWSERS ========== */
@media screen and (max-width: 768px) {
    section.rstpl-all-content-position {
        margin-top: -15px !important;
        padding-top: 0px !important;
    }
    section.rstpl-all-content-position .container {
        margin-top: -10px !important;
        padding-top: 0px !important;
    }
    section[style*="background-color"]:not(.rstpl-top-position):not(.rstpl-main-menu-position) {
        margin-top: -15px !important;
        padding-top: 0px !important;
    }
}

/* ========== 11. ENHANCED UTILITY CLASS FOR RS PAGE BUILDER ========== */
@media screen and (max-width: 768px) {
  .row.no-mobile-stack,
  .rspbld-row.no-mobile-stack {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .row.no-mobile-stack > [class*="col-"],
  .rspbld-row.no-mobile-stack > [class*="col-"] {
     flex: 1 1 0 !important;
     min-width: 0 !important;
     width: auto !important;
  }
}

/* ========== DESKTOP-ONLY IMAGE FIXES - NO MOBILE CHANGES ========== */
@media screen and (min-width: 769px) {
    .row1-image-spacing.nav-image:hover {
        transform: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
        transition: all 0.6s ease !important;
    }
    .row1-image-spacing .rspbld-image,
    .row1-image-spacing .rspbld-image img {
        max-width: 70% !important;
        max-height: 180px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: cover !important;
        display: block !important;
    }
    .row2-image-spacing.nav-image:hover {
        transform: none !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important;
        transition: all 0.6s ease !important;
    }
    .row2-image-spacing .rspbld-image,
    .row2-image-spacing .rspbld-image img {
        max-width: 70% !important;
        max-height: 180px !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        object-fit: cover !important;
        display: block !important;
    }
}

@media screen and (max-width: 768px) {
    .row1-image-spacing .rspbld-image,
    .row1-image-spacing .rspbld-image img,
    .row2-image-spacing .rspbld-image,
    .row2-image-spacing .rspbld-image img {}
    .row1-image-spacing.nav-image:hover,
    .row2-image-spacing.nav-image:hover {}
}

/* ========== EXCAVATION AND SERVICES STYLES - WITH FIXES ========== */

.excavation-hero {
    background-size: cover !important;
    background-position: center !important;
    color: white !important;
    padding: 2rem 2rem 6rem 2rem !important;
    min-height: 60vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.excavation-hero-content h1 {
    font-size: 3.5rem !important;
    margin-bottom: 1rem !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2) !important;
}

.excavation-hero-content p {
    font-size: 1.3rem !important;
    margin-bottom: 2rem !important;
    max-width: 600px !important;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3) !important;
}

.excavation-cta-button {
    display: inline-block !important;
    background: #f72403 !important;
    color: white !important;
    padding: 1rem 2rem !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    transition: all 0.3s !important;
    box-shadow: 0 4px 15px rgba(247, 36, 3, 0.3) !important;
    border: none !important;
}

.excavation-cta-button:hover {
    background: #d61f02 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(247, 36, 3, 0.4) !important;
}

.services-container {
  padding: 4rem 15px;
  background-color: white;
}

.services-title {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: #2c3e50;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.services-flex-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
}

.service-box {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-top: 4px solid #3498db;
  text-align: center;
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.service-box h3 {
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  color: #2c3e50;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.service-box p {
  color: #666;
  line-height: 1.6;
  margin: 0;
  font-family: Arial, sans-serif;
}

@media (min-width: 769px) {
  .services-flex-grid {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
  }
  .service-box {
    flex: 1 1 300px;
    max-width: 350px;
  }
}

.excavation-why-choose, .excavation-process, .excavation-contact {
    padding: 4rem 15px !important;
}

/* ========== BNC SERVICE AREAS - CSS GRID VERSION ========== */

.bnc-plumbing-service-areas-structured {
    background: #0ea5e9 !important;
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    padding: 25px 15px !important;
    border-radius: 15px !important;
    margin: 20px auto !important;
    max-width: 1200px !important;
    box-sizing: border-box !important;
}

.bnc-plumbing-service-areas-structured h2 {
    text-align: center !important;
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: bold !important;
    margin: 0 0 8px 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
    font-family: Arial, sans-serif !important;
}

.bnc-plumbing-service-areas-structured .bnc-structured-subtitle {
    text-align: center !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    margin: 0 0 25px 0 !important;
    font-family: Arial, sans-serif !important;
}

.bnc-plumbing-structured-container {
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 20px !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    box-sizing: border-box !important;
}

.bnc-plumbing-service-areas-structured .bnc-plumbing-city-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    padding: 15px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
}

.bnc-plumbing-city-section:last-child {
    margin-bottom: 0 !important;
}

.bnc-plumbing-service-areas-structured .bnc-plumbing-structured-city {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #0284c7 !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-align: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    margin-bottom: 6px !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

.bnc-plumbing-structured-city:last-child {
    margin-bottom: 0 !important;
}

.bnc-plumbing-service-areas-structured .bnc-plumbing-structured-city:hover {
    background: #f72403 !important;
    color: white !important;
}

@media screen and (max-width: 768px) {
    .bnc-plumbing-service-areas-structured h2 {
        font-size: 24px !important;
    }
}

@media screen and (max-width: 480px) {
    .bnc-plumbing-service-areas-structured .bnc-plumbing-city-section {
        grid-template-columns: 1fr !important;
    }
}

/* ========== CITY SERVICE PAGE STYLES ========== */

.bnc-city-page-wrapper {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    clear: both;
    overflow: hidden;
}

.bnc-city-hero {
    background: linear-gradient(135deg, #0972f3 0%, #065bb3 100%);
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin-bottom: 45px;
    border-radius: 0;
}

.bnc-city-hero h1 {
    font-size: 3em;
    margin-bottom: 20px;
    font-weight: 700;
    color: white !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.bnc-city-hero p {
    font-size: 1.3em;
    margin-bottom: 30px;
    opacity: 0.9;
    color: white !important;
}

.bnc-city-cta-button {
    display: inline-block;
    background: #f72403 !important;
    color: white !important;
    padding: 15px 30px;
    font-size: 18px;
    font-weight: bold;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s ease;
    border: 2px solid #f72403;
}

.bnc-city-cta-button:hover {
    background: #d61f02 !important;
    border-color: #d61f02;
    transform: translateY(-2px);
    color: white !important;
    text-decoration: none;
}

.bnc-city-content-wrapper {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto 45px auto;
}

.bnc-city-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 40px;
    margin-bottom: 45px;
}

.bnc-city-content-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-top: 4px solid #f72403;
}

.bnc-city-content-card.bnc-emergency-card {
    margin-bottom: 0;
}

.bnc-city-content-card h2 {
    color: #0972f3 !important;
    font-size: 2em;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.bnc-city-content-card p {
    margin-bottom: 20px;
    font-size: 1.1em;
    color: #333;
}

.bnc-city-content-card ul {
    margin-left: 20px;
    margin-top: 20px;
}

.bnc-city-content-card li {
    margin-bottom: 8px;
    color: #333;
}

.bnc-emergency-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.bnc-emergency-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bnc-emergency-item {
    line-height: 1.6;
}

.bnc-city-services-section {
    margin: 45px 0;
    padding: 0 20px;
}

.bnc-city-services-section h2 {
    text-align: center;
    color: #0972f3 !important;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-family: Arial, sans-serif;
}

.bnc-city-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 45px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: start;
}

.bnc-header-service-card {
    grid-column: 1 / -1;
    width: 100% !important;
    text-align: center;
    margin-bottom: 20px;
    background: #f8f9fa !important;
}

.bnc-city-service-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 3px solid #f72403;
    transition: none !important;
    transform: none !important;
}

.bnc-city-service-card:hover {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    scale: none !important;
    opacity: 1 !important;
    background-color: white !important;
}

.bnc-city-service-icon {
    font-size: 3em;
    color: #f72403;
    margin-bottom: 15px;
    display: block;
}

.bnc-city-service-card h3 {
    color: #0972f3 !important;
    font-size: 1.4em;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.bnc-city-service-card p {
    color: #333;
    line-height: 1.6;
}

.bnc-city-service-list {
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    max-width: 1200px;
    margin: 0 auto;
    border-top: 4px solid #0972f3;
}

.bnc-city-service-list h3 {
    color: #0972f3 !important;
    font-size: 1.8em;
    margin-bottom: 20px;
    font-family: Arial, sans-serif;
}

.bnc-city-service-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bnc-city-service-list li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 25px;
    color: #333;
}

.bnc-city-service-list li:before {
    content: "✓";
    color: #f72403;
    font-weight: bold;
    position: absolute;
    left: 0;
}

.bnc-city-service-list li:last-child {
    border-bottom: none;
}

.bnc-city-why-choose {
    background: #f8f9fa;
    padding: 60px 20px;
    margin: 45px 0;
}

.bnc-city-why-choose h2 {
    text-align: center;
    color: #0972f3 !important;
    font-size: 2.5em;
    margin-bottom: 40px;
    font-family: Arial, sans-serif;
}

.bnc-city-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.bnc-city-feature-card {
    background: white;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    text-align: center;
    border-top: 3px solid #f72403;
}

.bnc-city-feature-icon {
    font-size: 2.5em;
    color: #f72403;
    margin-bottom: 15px;
    display: block;
}

.bnc-city-feature-card h3 {
    color: #0972f3 !important;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.bnc-city-feature-card p {
    color: #333;
    line-height: 1.6;
}

.bnc-city-contact-section {
    background: #0972f3;
    color: white;
    padding: 60px 20px;
    text-align: center;
    margin: 45px 0 0 0;
}

.bnc-city-contact-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: white !important;
    font-family: Arial, sans-serif;
}

.bnc-city-contact-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
    color: white !important;
}

.bnc-city-contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.bnc-city-contact-card {
    background: rgba(255,255,255,0.1);
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.2);
}

.bnc-city-contact-card h3 {
    color: white !important;
    font-size: 1.3em;
    margin-bottom: 15px;
    font-family: Arial, sans-serif;
}

.bnc-city-contact-card p {
    color: white !important;
    line-height: 1.6;
}

.bnc-city-contact-card a {
    color: #ffd700 !important;
    text-decoration: none;
    font-weight: bold;
}

.bnc-city-contact-card a:hover {
    text-decoration: underline;
    color: #ffed4e !important;
}

/* ========== CONSISTENT SECTION SPACING FIX ========== */
/* This creates uniform 45px spacing between all sections */

.bnc-city-content-wrapper {
    margin-top: 45px;
}

.bnc-city-services-section {
    margin-top: 45px;
}

.bnc-city-why-choose {
    margin-top: 45px;
}

.bnc-city-contact-section {
    margin-top: 45px;
}

/* ========== MOBILE FULL WIDTH FIX ========== */
@media (max-width: 768px) {
    /* Force full width for all city page elements */
    .bnc-city-content-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .bnc-city-content-card,
    .bnc-city-service-card,
    .bnc-city-feature-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 20px 0 !important;
    }
    
    .bnc-city-hero,
    .bnc-city-page-wrapper section,
    .bnc-city-content-wrapper,
    .bnc-city-services-section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }
    
    .bnc-city-services-grid,
    .bnc-city-features-grid,
    .bnc-city-contact-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        padding: 0 !important;
        gap: 20px !important;
    }
    
    .bnc-emergency-grid {
        grid-template-columns: 1fr !important;
    }
    
    .bnc-city-hero h1 {
        font-size: 1.8em !important;
        line-height: 1.2 !important;
        word-wrap: break-word !important;
    }
    
    .bnc-city-hero p {
        font-size: 1.1em !important;
    }
    
    .bnc-header-service-card {
        margin-top: 30px !important;
    }
    
    /* Mobile spacing adjustments */
    .bnc-city-hero {
        margin-bottom: 30px !important;
    }
    
    .bnc-city-content-wrapper,
    .bnc-city-services-section,
    .bnc-city-why-choose,
    .bnc-city-contact-section {
        margin-top: 30px !important;
    }
}

/* ========== MOBILE TIGHT SPACING FIX - 10-15px BETWEEN ALL ROWS ========== */
@media screen and (max-width: 768px) {
    /* Override inline styles on all sections - tight spacing - MORE SPECIFIC */
    .bnc-city-page-wrapper > section[style],
    div.bnc-city-page-wrapper > section,
    .bnc-city-page-wrapper section.bnc-city-hero,
    .bnc-city-page-wrapper > section {
        margin: 10px 0 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* Hero section specific - ultra specific */
    section.bnc-city-hero[style*="margin"],
    .bnc-city-hero {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* All content cards - remove extra bottom margins */
    .bnc-city-content-card,
    .bnc-city-service-card,
    .bnc-city-feature-card {
        margin-bottom: 10px !important;
        margin-top: 0 !important;
    }
    
    /* Last card in each row - no bottom margin */
    .bnc-city-content-card:last-child,
    .bnc-city-service-card:last-child,
    .bnc-city-feature-card:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Grid containers - tight spacing */
    .bnc-city-content-grid,
    .bnc-city-services-grid,
    .bnc-city-features-grid,
    .bnc-city-contact-grid {
        gap: 10px !important;
        row-gap: 10px !important;
    }
    
    /* Reduce padding on colored background sections - MORE SPECIFIC */
    .bnc-city-page-wrapper > section[style*="background"],
    section[style*="background: #f8f9fa"],
    section[style*="background: #0972f3"] {
        padding: 30px 20px !important;
        margin: 10px 0 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* Remove extra spacing from wrapper */
    .bnc-city-content-wrapper,
    .bnc-city-services-section,
    .bnc-city-why-choose,
    .bnc-city-contact-section {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
    
    /* First section after hero - no extra top margin */
    .bnc-city-hero + section,
    section.bnc-city-hero + section {
        margin-top: 10px !important;
    }
    
    /* Nuclear option - target ANY section with inline margin styles */
    .bnc-city-page-wrapper section[style*="margin: 40px"] {
        margin: 10px 0 !important;
    }
}

/* ========== MOBILE ONLY - TIGHT SPACING 10px ========== */
@media screen and (max-width: 768px) {
    /* Target all sections with inline margin styles */
    .bnc-city-page-wrapper > section[style*="margin"] {
        margin: 10px auto !important;
    }
    
    /* Specific override for hero section */
    section.bnc-city-hero[style] {
        margin: 10px auto !important;
    }
    
    /* Grid gaps */
    .bnc-city-content-grid,
    .bnc-city-services-grid,
    .bnc-city-features-grid,
    .bnc-city-contact-grid {
        gap: 10px !important;
    }
    
    /* Card spacing */
    .bnc-city-content-card,
    .bnc-city-service-card,
    .bnc-city-feature-card {
        margin-bottom: 10px !important;
    }
    
    .bnc-city-content-card:last-child,
    .bnc-city-service-card:last-child,
    .bnc-city-feature-card:last-child {
        margin-bottom: 0 !important;
    }
}

/* ========== MOBILE SPACING FIX FOR AVON PAGE ========== */
@media screen and (max-width: 768px) {
    .bnc-avon-page .bnc-city-hero {
        margin-bottom: 10px !important;
    }
    
    .bnc-avon-page .bnc-city-page-wrapper > section {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }
}

/* ========== MOBILE SPACING FIX - TARGET SPECIFIC PROBLEM GAPS ONLY ========== */
@media screen and (max-width: 768px) {
    /* Fix Gap 1: Hero to Row 2 */
    .bnc-avon-page .bnc-city-hero {
        margin-bottom: 10px !important;
    }
    
    /* Fix Gap 2: Row 2 (24/7 card) to Row 3 (Hot Water) */
    .bnc-avon-page .bnc-city-content-grid {
        margin-bottom: 10px !important;
    }
    
    /* Fix Gap 3: Row 3 (three cards) to Row 4 (Full Service) */
    .bnc-avon-page .bnc-city-services-grid {
        margin-bottom: 10px !important;
    }
    
    /* Fix Gap 4: Row 4 (Full Service) to Row 5 (Why Choose) */
    .bnc-avon-page .bnc-header-service-card {
        margin-bottom: 10px !important;
    }
}

/* ========== TEST - SPACING BETWEEN MODULES ========== */
@media (max-width: 768px) {
    .test-module-1 {
        margin-bottom: 10px !important;
    }
    
    .test-module-2 {
        margin-top: 10px !important;
    }
}

/* Desktop - larger gap for comparison */
@media (min-width: 769px) {
    .test-module-1 {
        margin-bottom: 100px !important;
    }
}

@media (max-width: 768px) {
  .map-responsive {
    margin: 15px auto !important;
    padding: 0 !important;
  }
  
  /* Force the parent module to have padding */
  .moduletable:has(.map-responsive) {
    padding: 15px 0 !important;
  }
}