/* ========== 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; /* Your site red */
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 ========== */
/* These fixes apply to ALL phone links site-wide, especially mobile header */

/* FORCE ALL PHONE LINKS TO WORK */
a[href^="tel:"],
a[href^="tel:"] * {
/* RESET CONFLICTING STYLES */
pointer-events: auto !important;
position: relative !important;
z-index: 999999 !important;
cursor: pointer !important;
/* MOBILE TOUCH OPTIMIZATIONS */
-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;
/* ACCESSIBILITY */
outline: none !important;
/* PREVENT BLOCKING */
overflow: visible !important;
}

/* PREVENT CHILD ELEMENTS FROM BLOCKING CLICKS */
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 - WORKS FOR BOTH FIREFOX AND CHROME */
@media screen and (max-width: 768px) {
/* Show mobile header */
#custom-header-replacement {
display: block !important;
}

/* Hide desktop headers */
#rstpl-top-position,
#rstpl-main-menu-position {
display: none !important;
}

/* Mobile header styling - CROSS-BROWSER COMPATIBLE */
.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;
}

/* ENHANCED PHONE LINK - BULLETPROOF FOR MOBILE */
.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;
/* ENHANCED MOBILE TOUCH OPTIMIZATIONS */
-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;
/* PREVENT CONFLICTS */
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;
/* PREVENT ICON CONFLICTS */
margin: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}

/* HAMBURGER MENU - RESTORED WORKING VERSION */
.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 dropdown - RESTORED WORKING VERSION */
#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;
}

/* Mobile page spacing - Account for fixed header - UPDATED FOR TALLER NAVIGATION */
body {
padding-top: 70px !important;
}

/* Mobile header spacer - UPDATED FOR TALLER NAVIGATION */
#mobile-header-spacer {
height: 70px !important;
}

/* BLUE BACKGROUND SECTIONS - MOBILE-ONLY SPACING FIXES */
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;
}

/* CONTENT SECTIONS - MOBILE-ONLY SPACING FIXES */
section#rstpl-all-content-position {
margin-top: -15px !important;
padding-top: 2px !important;
}

/* CONTAINERS - MOBILE-ONLY SPACING FIXES */
.page-content .container {
padding-top: 2px !important;
margin-top: -12px !important;
}

/* FIRST ROWS - MOBILE-ONLY SPACING FIXES */
.container > .row:first-child {
margin-top: -15px !important;
padding-top: 2px !important;
padding-bottom: 5px !important;
}

/* SUBSEQUENT ROWS - Small reduction */
.container > .row {
margin-top: -3px !important;
margin-bottom: -2px !important;
padding-bottom: 8px !important;
}

/* OVERRIDE PAGE-SPECIFIC SPACING - Gentler approach */
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;
}

/* Remove red borders on mobile */
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;
}

/* Mobile responsive adjustments */
.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;
}

/* Mobile image spacing - SIMPLE AND CLEAN */
.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;
}

/* Custom Row 1 Image Spacing Control */
.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;
}

/* Custom Row 2 Image Spacing Control - WORKING SOLUTION */
.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;
}

/* Custom Row 3-9 Image Spacing Control - SAME PATTERN */
.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;
}

/* ========== TINY MOBILE SPACING FIX FOR NON-HOMEPAGE PAGES ========== */
/* Universal mobile spacing fix for non-homepage pages */

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

/* Safety - force homepage to stay as-is */
body[class*="itemid-101"] section:first-of-type,
body.view-featured section:first-of-type {
padding-top: 0px !important;
margin-top: -8px !important;
}

}

/* MOBILE CELL VIEW MARGINS - For very small screens */
@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;
}
}

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

/* ========== PHONE LINK FIX - OVERRIDES CONFLICTING RULES ========== */
/* NUCLEAR PHONE LINK FIX - MUST BE AT THE END TO OVERRIDE ALL OTHER RULES */
.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;
}

/* ========== FIREFOX SPECIFIC FIXES - TARGETED VERSION ========== */
@-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;
    }
   
    /* BODY PHONE LINKS - TARGETED FIX FOR FIREFOX (WON'T BREAK SLIDESHOW) */
    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;
        /* Remove the aggressive "all: revert" that breaks slideshows */
    }
   
    /* Firefox 5px spacing fix */
    @media screen and (max-width: 768px) {
        body {
            padding-top: 60px !important;
        }
    }
}

/* ========== 7. ACORN FINANCE BANNER - MUCH SMALLER & RESPONSIVE ========== */
#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;
}

/* Mobile adjustments */
@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;
}
}

/* Extra small screens */
@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;
}

/* Mobile responsive */
@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 FOR B N C PLUMBING ========== */
.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;
}

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

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

/* Alternative CSS targeting any Google Maps iframe */
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 ========== */
/* Service Area Map - MOBILE ONLY Changes (Desktop stays the same) */

/* MULTIPLE TARGETING METHODS - ONE OF THESE WILL WORK */
@media (max-width: 768px) {
    /* Target by filename */
    img[src*="service-area-map-finalwbracket.jpg"],
    img[src*="service-area-map"],
    img[src*="finalwbracket"],
    /* Target by path */
    img[src*="/images/text-blocks-illustrator/service-area-map-finalwbracket.jpg"],
    /* Target by container if it has one */
    .service-area img,
    .service-map img,
    /* Nuclear option - target ALL images in text-blocks-illustrator folder on mobile */
    img[src*="/images/text-blocks-illustrator/"] {
        width: 100% !important;
        height: auto !important;
        max-width: 600px !important;
        margin: 20px auto !important;
        display: block !important;
    }
}

/* Mobile phones - full width */
@media (max-width: 480px) {
    /* Same multiple targeting */
    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;
    }
}

/* Desktop stays exactly the same - no changes above 768px */

/* ========== 10. FINAL FIX - BOTH BROWSERS ========== */
@media screen and (max-width: 768px) {
    /* Less aggressive spacing - gives both browsers breathing room */
   
    /* Pull up the main Joomla content section */
    section.rstpl-all-content-position {
        margin-top: -15px !important; /* Was -25px, now -15px = +10px more space */
        padding-top: 0px !important;
    }
   
    /* Pull up Bootstrap containers */
    section.rstpl-all-content-position .container {
        margin-top: -10px !important; /* Was -20px, now -10px = +10px more space */
        padding-top: 0px !important;
    }
   
    /* Target blue background sections specifically */
    section[style*="background-color"]:not(.rstpl-top-position):not(.rstpl-main-menu-position) {
        margin-top: -15px !important; /* Was -25px, now -15px = +10px more space */
        padding-top: 0px !important;
    }
}

/* ========== DESKTOP-ONLY IMAGE FIXES - NO MOBILE CHANGES ========== */
/* This section only affects desktop, mobile stays completely unchanged */

/* DESKTOP ONLY - WRAP ALL IMAGE CHANGES IN MEDIA QUERY */
@media screen and (min-width: 769px) {

/* ========== TAME DOWN ROW 1 IMAGE ANIMATIONS ========== */
.row1-image-spacing.nav-image:hover {
transform: none !important; /* NO movement - just shadow effect */
box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; /* Ultra-light shadow only */
transition: all 0.6s ease !important; /* Slow, smooth shadow transition */
}

/* Make Row 1 images smaller (DESKTOP ONLY) */
.row1-image-spacing .rspbld-image,
.row1-image-spacing .rspbld-image img {
max-width: 70% !important; /* Back to safer percentage */
max-height: 180px !important; /* Back to safer height */
width: auto !important;
height: auto !important;
margin: 0 auto !important; /* Center the smaller images */
object-fit: cover !important;
display: block !important;
}

/* ========== TAME DOWN ROW 2 IMAGE ANIMATIONS ========== */
.row2-image-spacing.nav-image:hover {
transform: none !important; /* NO movement - just shadow effect */
box-shadow: 0 2px 6px rgba(0,0,0,0.04) !important; /* Ultra-light shadow only */
transition: all 0.6s ease !important; /* Slow, smooth shadow transition */
}

/* Make Row 2 images smaller (DESKTOP ONLY) */
.row2-image-spacing .rspbld-image,
.row2-image-spacing .rspbld-image img {
max-width: 70% !important; /* Back to safer percentage */
max-height: 180px !important; /* Back to safer height */
width: auto !important;
height: auto !important;
margin: 0 auto !important; /* Center the smaller images */
object-fit: cover !important;
display: block !important;
}

} /* END DESKTOP ONLY MEDIA QUERY */

/* ========== MOBILE ADJUSTMENTS ========== */
@media screen and (max-width: 768px) {
/* MOBILE IMAGES STAY EXACTLY THE SAME - NO CHANGES */
.row1-image-spacing .rspbld-image,
.row1-image-spacing .rspbld-image img,
.row2-image-spacing .rspbld-image,
.row2-image-spacing .rspbld-image img {
/* No changes - use original mobile styling */
}

/* Mobile animations stay exactly the same */
.row1-image-spacing.nav-image:hover,
.row2-image-spacing.nav-image:hover {
/* No changes - use original mobile styling */
}
}

/* ========== NEW, CLEANED UP EXCAVATION AND SERVICES STYLES ========== */

/* --- HERO BANNER STYLES --- */

/* Default styles for all screen sizes */
.excavation-hero {
    background-size: cover !important;
    background-position: center !important;
    color: white !important;
    padding: 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.5) !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.5) !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;
}


/* --- MOBILE-FIRST FLEXBOX FOR SERVICES SECTION --- */

/* General Container Styles */
.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;
}

/* MOBILE-FIRST STYLES (This is the default single-column layout) */
.services-flex-grid {
  display: flex;
  flex-direction: column; /* Stack items vertically */
  align-items: center;    /* Center the items horizontally */
  gap: 1.5rem;            /* Space between the boxes */
  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;
}

/* DESKTOP STYLES (Applies only when screen is 769px or wider) */
@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;
  }
}

/* --- OTHER EXCAVATION SECTIONS (for future use) --- */
.excavation-why-choose, .excavation-process, .excavation-contact {
    padding: 4rem 15px !important;
}