/* Normal menu items - force white (overrides base grey) */
#header .main_menu .mod-menu > li > a,
#header .main_menu .mod-menu > li > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > a,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > span {
    color: #ffffff !important;
}

/* Hover - prevent orange from returning */
#header .main_menu .mod-menu > li > a:hover,
#header .main_menu .mod-menu > li > span:hover,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > a:hover,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li > span:hover {
    color: #ffffff !important;
}

/* Active items - match the template's long selector chain exactly to override orange */
#header .main_menu .mod-menu > li.active > a,
#header .main_menu .mod-menu > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span,
#header .main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a {
    color: #ffffff !important;
}

/* If icons or ::before pseudo-elements are still colored */
.main_menu .mod-menu > li > a::before,
.main_menu .mod-menu > li > span::before,
.main_menu i.fa,
.main_menu i.fas,
.main_menu i.far {
    color: #ffffff !important;
}

/* Normal menu items - white text */
.main_menu .mod-menu > li > a,
.main_menu .mod-menu > li > span {
    color: #ffffff !important;
}

/* Active menu items - override orange to white */
.main_menu .mod-menu > li.active > a,
.main_menu .mod-menu > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a {
    color: #ffffff !important;
}

/* Prevent hover from turning orange (if it still does) */
.main_menu .mod-menu > li > a:hover,
.main_menu .mod-menu > li > span:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li > a:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li > span:hover {
    color: #ffffff !important;
}

/* Apply new background ONLY to the full hero container */
.wrapper-top-servicing-service-station {
    background-image: url('/images/os-cck/stelvio_hero_4.jpg') !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Force the INNER text box to have NO background image (transparent) */
.wrapper-inner-top-servicing-service-station {
    background-image: none !important;
    background-color: transparent !important;   /* or rgba(0,0,0,0.4) for light dark overlay if needed */
}

/* Optional: Add a dark overlay over the whole hero for better text contrast */
.wrapper-top-servicing-service-station::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);  /* adjust opacity: 0.3–0.6 */
    z-index: 1;
}

/* Keep text above overlay */
.wrapper-inner-top-servicing-service-station {
    position: relative;
    z-index: 2;
}

/* Override copyright link color to white */
.copyrights a {
    color: #ffffff !important;
}

/* Optional: Make hover a subtle light gray or keep white */
.copyrights a:hover {
    color: #e0e0e0 !important;  /* or #ffffff if you want no change on hover */
}

/* Override copyright top border to white */
.copyrights {
    border-top-color: #ffffff !important;
}

/* Back to Top button icon + hover */
#toTop i {
    color: #0056b3 !important;
    transition: color 0.3s ease;
}

#toTop:hover i {
    color: #004092 !important;  /* darker blue shade on hover */
}

/* === ABOUT US SECTION - MAKE "40 years of experience" WHITE === */
.wrapper-inner-left-about-us-service-station p,
.wrapper-inner-left-about-us-service-station p span {
    color: white !important;
}

/* Override OS Gallery category tabs background to blue */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a {
    background: #0056b3 !important;
}

/* Optional: darker blue on hover (better contrast and UX) */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a:hover {
    background: #004092 !important;   /* slightly darker shade */
}

/* Optional: active/selected tab style if it has different color */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a.active,
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li.active a {
    background: #004092 !important;   /* or keep #0056b3 if you prefer */
}

/* Override gallery tab hover text color - prevent orange */
.wrapper-gallery-service-station [class^=os-gallery-tabs-main] .osgalery-cat-tabs li a:hover {
    color: #c0c0c0 !important;          /* classic silver / light gray */
    /* Alternative shades you might prefer: */
    /* color: #d3d3d3 !important; */     /* brighter silver */
    /* color: #e0e0e0 !important; */     /* almost white silver */
    /* color: #d0e0ff !important; */     /* very light blue tint */
}

/* Change mobile menu button "MENU" label to blue */
.main_menu .navbar-header button:after {
    color: #0056b3 !important;
}

.map-container {
  position: relative;
  width: 100%;              /* Fills parent container width */
  padding-bottom: 56.25%;   /* 16:9 aspect ratio (common for maps; adjust below if needed) */
  height: 0;
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;                /* Extra safety */
}

/* Active parent (main level) - grey bg + white text */
.main_menu .mod-menu > li.active > a,
.main_menu .mod-menu > li.active > span {
    color: #ffffff !important;
    background-color: #3f3f41 !important;
    border-radius: 10px !important;
}

/* Active child (submenu) items - same grey bg + white text to prevent disappearing */
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li.active > span {
    color: #ffffff !important;
    background-color: #3f3f41 !important;   /* dark grey so white text shows */
}

/* Hover on child (submenu) items - darker blue background, white text */
.main_menu .mod-menu > li.parent > .mod-menu__sub > li:hover > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li:hover > span,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li:hover > a,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.parent > .mod-menu__sub > li:hover > span {
    color: #ffffff !important;
    background-color: #0056b3 !important;   /* medium blue on hover */
    /* Or darker blue: background-color: #004092 !important; */
}

/* Hover on active items (prevent any conflict) */
.main_menu .mod-menu > li.active > a:hover,
.main_menu .mod-menu > li.active > span:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > a:hover,
.main_menu .mod-menu > li.parent > .mod-menu__sub > li.active > span:hover {
    color: #ffffff !important;
    background-color: #2c2c2e !important;   /* slightly darker grey when hovering active */
}

.wrapper-gallery-service-station .img-block.dimas-effect .os-gallery-caption .os-gallery-img-title {
    color: #d3d3d3 !important;            /* white text */
    /* or silver: color: #d3d3d3 !important; */
    font-size: 32px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 6px rgba(0,0,0,0.9) !important;  /* stronger shadow for contrast */
}

/* Force horizontal pagination in CCK/blog context */
.cck-body .pagination__wrapper .pagination,
.cck-body #pagination,
.cck-body .pagination {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;  /* or flex-start / space-between as preferred */
    align-items: center !important;
    margin: 1rem auto !important;
    padding: 0 !important;
}

.cck-body .pagination li,
.cck-body .pagination .page-item,
.cck-body #pagination li {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 0.3rem !important;  /* Adjust spacing between buttons */
    padding: 0 !important;
    float: none !important;       /* Counter any float overrides */
    width: auto !important;       /* Prevent full-width stacking */
}

.cck-body .pagination .page-link,
.cck-body .pagination .page-item span.page-link,
.cck-body #pagination li > a,
.cck-body #pagination li > span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0.375rem 0.75rem !important;
    margin: 0 !important;
    line-height: 1;
}

/* Keep your existing color/border styles, but ensure no block-level interference */
.cck-body #pagination li > span,
.cck-body #pagination li > a {
    border: 1px solid #bbb !important;  /* Override to match your theme if needed */
}

/* Optional: Allow wrap on tiny screens */
@media (max-width: 576px) {
    .cck-body .pagination__wrapper .pagination {
        flex-wrap: wrap !important;
    }
    .cck-body .pagination li {
        margin: 0.3rem !important;
    }
}

/*
  ==============================================
  WHEEL STRAIGHTENING SERVICE SECTION STYLING
  - Styles for the two-column layout (text left, image right on desktop)
  - Responsive: image stacks above text on mobile
  - Used with HTML block: wheel-straightening-section class
  - Image: /images/os-cck/bend_before_after.jpg
  - Colors: Uses #0056b3 as accent (change to your brand primary if needed)
  - Last updated: March 14, 2026
  - Location: templates/[your_template]/css/custom.css
  ==============================================
*/

.wheel-straightening-section {
    max-width: 1200px;
    margin: 0 auto 2rem;          /* Centers block + adds bottom spacing */
}

.wheel-straightening-section h2 {
    margin-bottom: 1.25rem;
    color: #222;                  /* Dark neutral for main title */
    font-size: 2.25rem;           /* Adjust if your template has different scale */
}

.wheel-straightening-section h3 {
    margin: 1.5rem 0 0.75rem;
    color: #0056b3;               /* Accent color - change to match site palette */
    font-size: 1.75rem;
}

.wheel-straightening-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.wheel-straightening-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;          /* Light gray background for emphasis */
    border-left: 5px solid #0056b3; /* Colored left border as visual anchor */
    margin-top: 1.5rem;
}

/* Image styling */
.wheel-straightening-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;      /* Soft rounded corners */
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); /* Subtle drop shadow */
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .wheel-straightening-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .wheel-straightening-section h2 {
        font-size: 1.875rem;      /* Slightly smaller title on mobile */
    }
}

/*
  ==============================================
  CRACK REPAIR SERVICE SECTION STYLING
  - Matches Wheel Straightening section exactly
  - Two-column layout (text left, image right on desktop)
  - Responsive stacking on mobile
  - Last updated: March 14, 2026
  ==============================================
*/

.crack-repair-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.crack-repair-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.crack-repair-section h3 {
    margin: 1.5rem 0 0.75rem;
    color: #0056b3;               /* Change to your brand primary color */
    font-size: 1.75rem;
}

.crack-repair-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.crack-repair-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 5px solid #0056b3;
    margin-top: 1.5rem;
}

/* Image styling (same as wheel straightening) */
.crack-repair-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .crack-repair-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .crack-repair-section h2 {
        font-size: 1.875rem;
    }
}

/*
  ==============================================
  TIRE MOUNTING & BALANCING SERVICE SECTION STYLING
  - Consistent with Wheel Straightening, Crack Repair, etc.
  - Two-column layout (text left, image right on desktop)
  - Responsive stacking on mobile
  - Last updated: March 14, 2026
  ==============================================
*/

.tire-service-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.tire-service-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.tire-service-section ul {
    padding-left: 1.5rem;
    margin: 1rem 0;
    list-style-type: disc;
}

.tire-service-section li {
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.tire-service-section img {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .tire-service-section .col-lg-5 {
        order: -1;                /* Image above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .tire-service-section h2 {
        font-size: 1.875rem;
    }
}

/*
  ==============================================
  OEM REFINISHING SERVICE SECTION STYLING
  - Consistent with Wheel Straightening, Crack Repair, Tire Mounting, etc.
  - Two-column layout (text left, image/placeholder right on desktop)
  - Responsive stacking on mobile
  - Includes placeholder styling for image area
  - Reuses .call-to-action from previous sections
  - Last updated: March 14, 2026
  ==============================================
*/

.oem-refinishing-section {
    max-width: 1200px;
    margin: 0 auto 2rem;
}

.oem-refinishing-section h2 {
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.oem-refinishing-section img,
.oem-refinishing-section .image-placeholder {
    max-width: 100%;
    height: auto;
    border-radius: 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}

/* Placeholder styling (remove when real image is added) */
.oem-refinishing-section .image-placeholder {
    background-color: #f8f9fa;
    border: 2px dashed #ccc;
    color: #6c757d;
    font-size: 1.1rem;
    min-height: 300px;
}

/* Call-to-action (reused from Straightening/Crack Repair) */
.call-to-action {
    font-size: 1.15rem;
    font-weight: bold;
    padding: 1rem;
    background: #f8f9fa;
    border-left: 5px solid #0056b3; /* Change color to match your brand */
    margin-top: 1.5rem;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .oem-refinishing-section .col-lg-5 {
        order: -1;                /* Image/placeholder above text on smaller screens */
        margin-bottom: 1.5rem;
    }
    
    .oem-refinishing-section h2 {
        font-size: 1.875rem;
    }
}

/* Modern enhancements for all service sections */
.service-section h2 {
    font-weight: 700;
    letter-spacing: -0.5px;
}

.service-bullets {
    list-style: none;
    padding-left: 0;
}

.service-bullets li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.service-bullets i {
    color: #0056b3; /* brand color */
    margin-right: 12px;
    font-size: 1.3rem;
}

.btn-primary {
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

img.hover-zoom {
    transition: transform 0.4s ease;
}

img.hover-zoom:hover {
    transform: scale(1.05);
}

.rounded-lg {
    border-radius: 0.75rem !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important;
}

/* 
  ==============================================
  MODERN SERVICE SECTIONS – SHARED STYLING
  - Icons on bullets, CTA buttons, hover effects
  - Alternating image sides via flex-row-reverse
  - Last updated: March 14, 2026
  ==============================================
*/

.service-section {
    max-width: 1200px;
    margin: 0 auto 3rem;
    padding: 2rem 1rem;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 0.25rem 1rem rgba(0,0,0,0.08);
}

.service-section h2 {
    font-weight: 700;
    margin-bottom: 1.25rem;
    color: #222;
    font-size: 2.25rem;
}

.service-bullets {
    list-style: none;
    padding-left: 0;
    margin: 1.25rem 0;
}

.service-bullets li {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: flex-start;
}

.service-bullets i {
    color: #0056b3; /* your brand accent color */
    font-size: 1.4rem;
    margin-right: 12px;
    margin-top: 4px;
}

.btn-primary {
    padding: 0.75rem 1.75rem;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,86,179,0.25);
}

img.hover-zoom {
    transition: transform 0.4s ease;
}

img.hover-zoom:hover {
    transform: scale(1.05);
}

.rounded-lg {
    border-radius: 0.75rem !important;
}

.shadow-lg {
    box-shadow: 0 1rem 3rem rgba(0,0,0,0.15) !important;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .service-section .col-lg-5 {
        margin-bottom: 2rem;
    }
    
    .service-section h2 {
        font-size: 1.875rem;
    }
}

/* 
  ==============================================
  SINGLE SERVICES PAGE ENHANCEMENTS
  - Hero, jump menu, final CTA bar
  - Consistent with previous modern service blocks
  - Last updated: March 15, 2026
  ==============================================
*/

/* ==============================================
   HERO SERVICES SECTION 
   - Main homepage/services hero with welding background
   - Image path & overlay controlled inline in HTML for easy edits
   - All typography, spacing, shadows here
   ============================================== */

.hero-services {
    min-height: 450px;               /* prevents collapse on wide screens */
    color: white;
    padding: 6rem 1rem;              /* vertical spacing — adjust as needed */
}

.hero-services h1,
.hero-services .lead {
    text-shadow: 0 2px 5px rgba(0,0,0,0.7);   /* helps readability on bright sparks */
}

/* Light outline buttons on dark bg */
.hero-services .btn-outline-light {
    border-color: white;
    color: white;
}

.hero-services .btn-outline-light:hover,
.hero-services .btn-outline-light:focus {
    background-color: rgba(255,255,255,0.15);
    color: white;
}

/* Optional: tighter spacing on small screens */
@media (max-width: 576px) {
    .hero-services {
        min-height: 380px;
        padding: 4rem 1rem;
    }
}

/* Jump Menu */
.jump-menu {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.jump-menu a {
    color: #0056b3;
    text-decoration: none;
    font-weight: 600;
}

.jump-menu a:hover {
    color: #003d82;
}

/* Final CTA */
.final-cta {
    background: #0056b3; /* your brand primary */
}

.final-cta h3 {
    font-weight: 700;
}

.btn-light:hover, .btn-outline-light:hover {
    transform: translateY(-2px);
}

/* General service section polish (already in previous CSS) */
.service-section {
    padding: 3rem 1rem;
    border-bottom: 1px solid #eee;
}

.service-section:last-child {
    border-bottom: none;
}

/* ======================================================================
   === HOME PAGE SERVICE BOXES (CLICKABLE CARDS) ========================
   === Controls layout, hover effects, and clickability of the 6 boxes ===
   === that link to /services sections ==================================
   ====================================================================== */

.wrapper-services-service-station .row {
    /* Optional: add negative margin fix if columns have extra spacing issues */
    margin-left: -15px;
    margin-right: -15px;
}

.wrapper-services-service-station .row > div {
    display: flex;                    /* makes columns equal height */
}

.wrapper-inner-services-service-station {
    position: relative;               /* required for stretched-link */
    flex: 1;                          /* fills column height */
    padding: 2.5rem 1.5rem;           /* adjust to match your design */
    background-color: #ffffff;        /* or your card background */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    overflow: hidden;                 /* prevents content overflow on hover */
}

.wrapper-inner-services-service-station:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 32px rgba(0,0,0,0.15);
}

/* Make the invisible link cover the entire card */
.wrapper-inner-services-service-station .stretched-link {
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Keep icons, headings, text above the link layer */
.wrapper-inner-services-service-station i,
.wrapper-inner-services-service-station h3,
.wrapper-inner-services-service-station p {
    position: relative;
    z-index: 2;
}

/* Icon styling (optional – customize as needed) */
.wrapper-inner-services-service-station i {
    font-size: 3.2rem;
    margin-bottom: 1.25rem;
    color: #0d6efd;                   /* or your brand color */
    display: block;
}

/* Responsive tweaks */
@media (max-width: 991px) {
    .wrapper-inner-services-service-station {
        padding: 2rem 1.25rem;
    }
}

/* Active gallery tab: keep background #ccc, change text to medium silver */
[class^=os-gallery-tabs-main] .osgalery-cat-tabs li a.active {
    color: #c0c0c0 !important;  /* Medium silver – soft and readable */
    /* background: #ccc !important; */  /* Commented out – keeps original background */
}

/* === SERVICES SECTION BACKGROUND IMAGE OVERRIDE === */
/* Targets the existing .wrapper-services-service-station rule     */
/* Replaces old image with new one – keeps all other properties   */
/* ================================================================== */

.wrapper-services-service-station {
    background: url('/images/os-cck/services_bg_2.jpg') center center / cover no-repeat fixed !important;
}

/* ======================================================== */
/* FOOTER1 MODULE - LOGO + TEXT + MAP STYLING             */
/* Location: footer1 position (Service Station template)  */
/* Purpose: Centers logo, sets white text, responsive map */
/* Added: March 21, 2026                                   */
/* To remove: Delete this entire block                     */
/* ======================================================== */

.footer-logo-section {
  text-align: center;
  padding: 20px 15px;
  color: #ffffff; /* Base white text color for the section */
}

.footer-logo {
  max-width: 180px;     /* Adjust this value if you want the logo bigger/smaller */
  height: auto;
  display: block;
  margin: 0 auto 15px;
}

.footer-title {
  margin-bottom: 8px;
  font-size: 1.4rem;
  font-weight: 600;
  color: #ffffff !important; /* Force white – overrides any theme color */
}

.footer-tagline {
  margin: 0;
  font-size: 0.95rem;
  color: #ffffff !important; /* Force white */
  opacity: 0.9; /* Slightly softer white for tagline */
}

.footer-map {
  margin-top: 20px;
}

.footer-map iframe {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3); /* Optional subtle shadow for depth */
  width: 100%;
}

/* Mobile adjustments – keeps everything readable on phones */
@media (max-width: 767px) {
  .footer-logo {
    max-width: 140px;
  }
  .footer-title {
    font-size: 1.25rem;
  }
  .footer-map iframe {
    height: 200px;
  }
}

/* ==============================================
   HOMEPAGE SERVICES BUTTONS - FORCED VISIBILITY & SIZE
   - Makes "Learn More" buttons smaller and always readable
   - Overrides template hover-only styles
   - Last updated: April 2026
   ============================================== */

.service-learn-more {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    background-color: #007bff !important;
    border-color: #007bff !important;
    display: inline-block !important;
    text-decoration: none !important;
}

.service-learn-more:hover {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #ffffff !important;
}

/* Ensure text is visible even if template tries to hide it */
.wrapper-inner-services-service-station .btn {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Stronger fix for Joomla Page Navigation - Force horizontal layout */
.pagenavigation,
.pagenavigation .pagination {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 30px !important;
    margin: 40px 0 30px 0 !important;
    width: 100% !important;
    flex-wrap: wrap !important;
}

.pagenavigation .pagination span {
    display: flex !important;
    gap: 30px !important;
    width: 100% !important;
}

/* Target the buttons directly */
.pagenavigation .btn,
.pagenavigation .btn-secondary,
.pagenavigation .btn-sm {
    min-width: 160px !important;
    padding: 12px 28px !important;
    font-size: 1.05rem !important;
    border-radius: 6px !important;
    margin: 0 !important;
}

/* Force blue color */
.pagenavigation .btn-secondary,
.pagenavigation .btn {
    background-color: #0056b3 !important;
    border-color: #0056b3 !important;
    color: #ffffff !important;
}

.pagenavigation .btn-secondary:hover,
.pagenavigation .btn:hover {
    background-color: #0b5ed7 !important;
    border-color: #0a58ca !important;
    color: #ffffff !important;
}

/* Mobile: stack only on very small screens */
@media (max-width: 576px) {
    .pagenavigation .pagination,
    .pagenavigation .pagination span {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: stretch !important;
    }
    
    .pagenavigation .btn {
        min-width: 100% !important;
    }
}

/* FIX - Who We Are right column text cutoff */
.wrapper-inner-right-about-us-service-station,
.wrapper-inner-right-about-us-service-station > p {
    overflow: visible !important;
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 30px !important;
    box-sizing: border-box !important;
    word-break: break-word !important;
    hyphens: auto !important;
    white-space: normal !important;
}

/* Extra force on the paragraph */
.wrapper-inner-right-about-us-service-station > p {
    padding-right: 35px !important;
    line-height: 1.75 !important;
}

/* Target the parent container too */
.wrapper-inner-right-about-us-service-station {
    padding-right: 40px !important;
}

/* Final CTA - Force exact brand blue + bright white text */
.final-cta,
section.final-cta {
    background: #0056b3 !important;
    background-color: #0056b3 !important;
}

/* Bright white text for headings and paragraphs */
.final-cta h3,
.final-cta .lead,
.final-cta p {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.4) !important;
}

/* Make sure buttons stay visible */
.final-cta .btn-light {
    color: #0056b3 !important;
    border-color: #ffffff !important;
}

.final-cta .btn-outline-light {
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* Contact Page - Force email link color */
.wrapper-inner-location-contact-us-service-station a[href^="mailto:"] {
    color: #0066cc !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.wrapper-inner-location-contact-us-service-station a[href^="mailto:"]:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

/* Force email link color inside Convert Forms */
.convertforms-container a[href^="mailto:"],
.convertforms-container a,
.convertforms-container .cf-field-email a,
form.convertforms a[href^="mailto:"],
.convertforms a.email {
    color: #0066cc !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

.convertforms-container a[href^="mailto:"]:hover,
.convertforms-container a:hover {
    color: #0056b3 !important;
    text-decoration: underline !important;
}

/* Extra aggressive override */
div[class*="convertform"] a[href^="mailto:"],
.cf-field a[href^="mailto:"] {
    color: #0066cc !important;
}