/* Template Home CSS */ .heroSection.homeHero {background-color: #002e4b;background-image: none !important;background-repeat: no-repeat;background-size: cover;background-position: center;} body:not(.search-results) .heroSection.homeHero .subTitle.text-secondary {color: #fff !important;} body:not(.search-results) .heroSection.homeHero h1 {color: #fff !important;font-size: 2.25rem;} .heroSection.homeHero p, .heroSection.homeHero p strong {color: #fff !important;} .heroLogo {width: 80px;float: left;margin-right: 5%;} .autoSecBoxes {max-width: 1600px;margin: 0 auto !important;justify-content: center;} .repair-services {border-radius: 4px;overflow: hidden;padding: 0 !important;background-color: #fff;width: 100%;margin: .5rem;box-shadow: 3px 3px 15px 0px rgba(0, 0, 0, 0.1);position: relative;transition: .2s ease all;} .repair-services .service-img {width: 100%;height: 150px; } .repair-services .service-img:after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 150px; background: rgba(3, 99, 157, 0.8); } .repair-services:first-child .service-img:after { content: url(/wp-content/uploads/2026/04/microchip-1.webp); display: flex; justify-content: center; align-items: center; } .repair-services:nth-child(2) .service-img:after { content: url(/wp-content/uploads/2026/04/cnc-machine.webp); display: flex; justify-content: center; align-items: center; } .repair-services:nth-child(3) .service-img:after { content: url(/wp-content/uploads/2026/04/electric-motor.webp); display: flex; justify-content: center; align-items: center; } .page-id-352681 .repair-services:last-child .service-img:after, .page-id-153 .repair-services:last-child .service-img:after { content: url(/wp-content/uploads/2026/04/ballscrew.webp) !important; display: flex; justify-content: center; align-items: center; } .repair-services .service-content {padding: 1.5rem 1.5rem 0;} .repair-services .service-hover {padding: 0 1.5rem 1.5rem; border-radius:4px;} .repair-services .service-hover h3 {display: none;} .repair-services .service-hover ul.service-list li {width: 100%;margin-bottom: 5px;} .page-id-352681 .partners, .page-id-153 .partners { background-color: #002136; padding: 3rem 2.5rem; } .page-id-352681 .partner-logo, .page-id-153 .partner-logo { width: 670px; border-radius: 4px; } .page-id-352681 .partners .row, .page-id-153 .partners .row { gap: 1.5rem; } .page-id-352681 .partners .first, .page-id-153 .partners .first, .page-id-352681 .partners .second, .page-id-153 .partners .second { max-width: 48%; flex: 0 0 48%; } .page-id-352681 .partners .first, .page-id-153 .partners .first { text-align: end; } .page-id-352681 .partners h3, .page-id-352681 .partners p, .page-id-153 .partners h3, .page-id-3153 .partners p { color: #fff; text-align: left; width: 700px; } .page-id-352681 .partners .first h3, .page-id-352681 .partners .first p, .page-id-153 .partners .first h3, .page-id-153 .partners .first p, .page-id-153 .partners .second p { margin-left: auto; color: #fff; } .page-id-352681 .partners .first, .page-id-153 .partners .first { max-width: 700px; text-align: left; margin-left: auto; } .page-id-352681 .remanSpares, .page-id-153 .remanSpares { display: none; } .remanSpares .row {background-color: #f4f4f4;border-radius: 4px;overflow: hidden;margin: 0 15px;} .remanSpares .row .reman-image {padding: 0 !important;width: 100%;min-height: 250px;} .remanSpares .row .reman-content {padding: 2rem;} .remanSpares .row .reman-content h2 {margin-top: 0 !important;} .page-id-352681 .authSection h2, .page-id-153 .authSection h2 { color: #fff !important; } .page-id-352681 .authSection, .page-id-153 .authSection { padding: 80px 0; background: linear-gradient(90deg, #002e4b 0%, #005a92 100%) !important; } .page-id-352681 .authSection p, .page-id-153 .authSection p { margin-bottom: 2.25rem; } .page-id-352681 .authSection .auth-list, .page-id-153 .authSection .auth-list { gap: 1.9rem; justify-content: center; } .page-id-352681 .authSection .auth-item, .page-id-153 .authSection .auth-item { padding-left: 0; padding-right: 0; } .page-id-352681 .authSection .auth-list, .page-id-153 .authSection .auth-list, .page-id-352681 .authSection .btn, .page-id-153 .authSection .btn { margin-bottom: 0 !important; } .page-id-352681 .authSection .auth-item, .page-id-153 .authSection .auth-item { background-color: #fff; border-radius: 4px; margin: 0; max-width: 30%; flex: 0 0 30%; } .page-id-352681 .authSection .btn, .page-id-153 .authSection .btn { margin-top: 2.25rem !important; } .page-id-352681 .home-auth-card-title, .page-id-153 .home-auth-card-title { margin-top: 0; } .authSection {text-align: center;} .authSection > .container > div {margin: 0 auto;} .authSection .auth-list {margin-bottom: 2rem !important;} .authSection .auth-item a:hover {opacity: .5;} .page-id-352681 .manufSection, .page-id-153 .manufSection { display: none; } .manufSection {height: auto;} .manufSection h2 {font-size: 3.125rem;} .manufSection .container.row {align-items: center;padding: 2rem 0;} .manufSection .row.manage-services {padding-bottom: 2rem;margin: 0 auto;max-width: 1600px;width: 100%;flex-direction: row;align-items: stretch;height: 100%;justify-content: center;} .manufSection .row.manage-services .manuf-container {width: calc(100% - 1rem);margin: .5rem;} .manufSection .row.manage-services .manuf-container a {background-color: #002136;color: #fff;font-weight: 600;font-size: 18px;border-radius: 4px;padding: 1.5rem;text-align: center;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;transition: .2s ease all;} .manufSection .row.manage-services .manuf-container a:hover {background-color: #0066a4;text-decoration: none;transition: .2s ease all;} .infoSupport .row > div {margin: 15px 0;} .infoSupport .info-container {background-color: #f4f4f4;padding: 2rem;height: 100%;border-radius: 6px;} .infoSupport .info-container .icon i {font-size: 35px;} .infoSupport .info-container p {margin-bottom: 5rem;} .infoSupport .info-container select, .infoSupport .info-container a {position: absolute;bottom: 2rem;font-family: 'Roboto', sans-serif;line-height: 2;} .infoSupport select {background-color: #002136;color: #fff;border: none;padding: .5rem 1rem;width: calc(100% - 6rem);min-width: calc(100% - 6rem);font-family: 'Roboto Condensed', sans-serif;transition: .2s ease all;} @media screen and (max-width: 1457px) { .page-id-352681 .partners .first, .page-id-153 .partners .first { max-width: 48%; flex: 0 0 48%; margin-left: initial; } .page-id-352681 .partners h3, .page-id-352681 .partners p, .page-id-153 .partners h3, .page-id-3153 .partners p { width: 100%; } } @media screen and (max-width: 1399px) { .page-id-352681 .autoSection .repair-services { width: calc(50% - 1rem); } } @media screen and (max-width: 991px) { .page-id-352681 .partners .first, .page-id-153 .partners .first, .page-id-352681 .partners .second, .page-id-153 .partners .second { max-width: 100%; flex: 0 0 100%; } .page-id-352681 .partner-logo, .page-id-153 .partner-logo { width: 100%; } } @media screen and (max-width: 767px) { .page-id-352681 .autoSection .repair-services { width: 100%; } .page-id-352681 .authSection .auth-item, .page-id-153 .authSection .auth-item { max-width: 48%; flex: 0 0 48%; } } @media screen and (max-width: 575px) { .page-id-352681 .authSection .auth-item, .page-id-153 .authSection .auth-item { max-width: 100%; flex: 0 0 100%; } } @media screen and (min-width: 768px) { body:not(.search-results) .heroSection.homeHero .subTitle.text-secondary {color: #ff133b !important;} body:not(.search-results) .heroSection.homeHero h1 {line-height: 1.3;} .heroSection.homeHero p {font-size: 1.15rem;} .repair-services {width: calc(50% - 1rem);} .remanSpares .row .reman-content {padding: 3rem;} .manufSection .row.manage-services .manuf-container {width: calc(50% - 1rem);} } @media screen and (min-width: 992px) { .heroLogo {width: 125px;} .heroSection.homeHero {background-image: var(--wpr-bg-1e24048a-8597-4ae3-a450-5e389e658e64) !important;} .repair-services {width: calc(33.333% - 1rem);margin: .5rem;} .repair-services:hover {box-shadow: none;transition: .2s ease all;} .repair-services .service-content {padding: 1.5rem;} .repair-services .service-hover {opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: #f4f4f4;padding: 2rem;transition: .2s ease all;} .repair-services:hover .service-hover {opacity: 1;transition: .2s ease all;} .repair-services .service-hover h3 {display: block;} .manufSection {margin-bottom: 0;height: auto;} .manufSection .reposition-container {top: unset;} .manufSection .container.row {background-color: transparent;} .manufSection .row.manage-services .manuf-container {width: calc(33.3333% - 1rem);} } @media screen and (min-width: 1200px) { body:not(.search-results) .heroSection.homeHero h1 {font-size: 2.5rem;} body.home .pageSection h2 {font-size: 3.125rem;} .manufSection {margin-bottom: 300px;height: 400px;background-image: url(/wp-content/uploads/2024/01/AdobeStock_23546691-1.webp);} .manufSection .container.row {background-color: #fff;border-radius: 6px;padding: 2rem;} .manufSection .reposition-container {position: relative;top: 300px;display: flex;flex-wrap: wrap;} .manufSection .row.manage-services .manuf-container {width: calc(20% - 1rem);} } @media screen and (min-width: 1400px) { .repair-services {width: calc(20% - 1rem);} } .Title_module_title__31b26777 {display: none !important;} .vp-sidedock.SideDock_module_root__98c28094 {display: none;} .vp-title.Title_module_title__31b26777 {display: none !important;} /* ========================================================================== OVERRIDES (DUCT TAPE & DREAMS) ========================================================================== */ /* ========================================================================== OVERRIDES: 5-BOX FLEX MATRIX WITH RE-RESPONSIVE BREAKPOINTS ========================================================================== */ /* 1. Parent Layout Canvas */ .autoSecBoxes { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: 20px !important; width: 100% !important; max-width: 1600px !important; margin: 0 auto !important; } /* 2. Base Box Rules & Default Mobile View (Full Width) */ .autoSecBoxes .repair-services { display: flex !important; flex-direction: column !important; flex: 1 1 100% !important; max-width: 100% !important; margin: 0 !important; /* Strips theme spacing bugs */ box-sizing: border-box !important; } /* 3. BREAKPOINT: Tablet & Small Laptops (768px to 1199px) -> Rows of 2 */ @media screen and (min-width: 768px) { .autoSecBoxes .repair-services { /* Formula: (100% / 2 columns) - half of the 20px gap */ flex: 1 1 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } } /* 4. BREAKPOINT: Large Laptops & Standard Screens (1200px to 1439px) -> Rows of 3 */ @media screen and (min-width: 1200px) { .autoSecBoxes .repair-services { /* Formula: (100% / 3 columns) - proportional gap space */ flex: 1 1 calc(33.333% - 14px) !important; max-width: calc(33.333% - 14px) !important; } } /* 5. BREAKPOINT: Massive Desktops (1440px and up) -> Clean Row of 5 */ @media screen and (min-width: 1440px) { .autoSecBoxes .repair-services { /* Formula: (100% / 5 columns) - proportional gap space */ flex: 1 1 calc(20% - 16px) !important; max-width: calc(20% - 16px) !important; } } /* ========================================================================== TYPOGRAPHY, TEXT HANDLING & HOVER OVERRIDES ========================================================================== */ /* Typography and text-wrapping for the repair boxes */ .autoSecBoxes .repair-services h3, .autoSecBoxes .repair-services p, .autoSecBoxes .repair-services li, .autoSecBoxes .repair-services a { color: #002136 !important; font-size: 16px !important; white-space: normal !important; word-wrap: break-word !important; line-height: 1.4 !important; } /* FIXED: Target BOTH the base visible heading AND the hidden hover heading to make them bolder */ .autoSecBoxes .repair-services .service-content h3, .autoSecBoxes .repair-services .service-hover h3 { font-size: 20px !important; /* Slightly enlarged for solid reading balance */ font-weight: 900 !important; /* Ultra-Bold heavy typography scale */ color: #002e4b !important; /* Solid dark contrast brand color */ margin-bottom: 12px !important; letter-spacing: -0.2px !important; /* Cleans up line wrapping presentation */ } /* Base rule for the blue overlay layout */ .autoSecBoxes .repair-services .service-img:after { position: absolute !important; top: 0 !important; left: 0 !important; display: flex !important; width: 100% !important; height: 150px !important; background: rgba(3, 99, 157, 0.8) !important; justify-content: center !important; align-items: center !important; } /* ========================================================================== WEBP IMAGE MAPPING ASSETS ========================================================================== */ .autoSecBoxes .repair-services:nth-child(1) .service-img:after { content: url(/wp-content/uploads/2026/04/microchip-1.webp) !important; } .autoSecBoxes .repair-services:nth-child(2) .service-img:after { content: url(/wp-content/uploads/2026/04/cnc-machine.webp) !important; } .autoSecBoxes .repair-services:nth-child(3) .service-img:after { content: url(/wp-content/uploads/2026/04/electric-motor.webp) !important; } .autoSecBoxes .repair-services:nth-child(4) .service-img:after { content: url(/wp-content/uploads/2026/05/valve.png); } .autoSecBoxes .repair-services:nth-child(5) .service-img:after, .page-id-153 .repair-services:nth-child(5) .service-img:after { content: url(/wp-content/uploads/2026/04/ballscrew.webp) !important; } /* ========================================================================== REMANUFACTURED SPARES SECTION ========================================================================== */ /* 1. Gradient & Overflow */ .remanSpares { background: linear-gradient(90deg, #002e4b 0%, #005a92 100%) !important; margin: 0 !important; max-width: 100% !important; padding: 0 !important; overflow: hidden !important; } /* 2. Container & Row reset */ .remanSpares .container { background: transparent !important; padding: 0 15px !important; } .remanSpares .row { background: transparent !important; margin: 0 !important; display: flex !important; align-items: center !important; } /* 3. Motor Fix - Shrink and Nudge */ .remanSpares .reman-image { padding: 20px !important; display: flex !important; justify-content: center !important; } .remanSpares .reman-motor-img { height: auto !important; display: block !important; width: 90% !important; max-width: 350px !important; margin-left: 10px !important; } /* 4. White Box Structure */ .remanSpares .reman-white-box { background-color: #ffffff !important; border-radius: 4px !important; padding: 1rem 2rem 2rem 2rem !important; } /* 5. Brutally killing the red text - BEGONE RED TEXT HIDING SOMEWHERE IN 2000 LINES OF CSS */ .remanSpares .reman-white-box h4, .remanSpares .reman-white-box h4 i { color: #002e48 !important; /* Blue */ margin-top: 0 !important; } /* Target every possible text element in the box to force gray */ .remanSpares .reman-white-box p, .remanSpares .reman-white-box span, .remanSpares .reman-white-box div, .remanSpares .reman-white-box .text-secondary, .remanSpares .reman-white-box .small { color: #555555 !important; } /* 6. Middle Content Spacing */ .remanSpares .reman-content { padding: 0 30px !important; } .remanSpares .reman-content h2, .remanSpares .reman-content p { color: #ffffff !important; } /* ========================================================================== MOBILE & TABLET VIEW: GHOST BOX COLLAPSE & AUTO-HEIGHT CLAMP ========================================================================== */ @media screen and (max-width: 1024px) { /* 1. Force the main section to act as a tight vertical stack context */ .remanSpares { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; min-height: 0 !important; /* Forces layout calculations to shrink-wrap content */ height: auto !important; padding: 40px 0 !important; /* Clean, balanced top and bottom padding boundaries */ } /* 2. Force the inner container and row to collapse around active elements */ .remanSpares .container, .remanSpares .row { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; } /* 3. HARD NUKING THE GHOST IMAGE WRAPPER - Force zero dimensional footprint */ .remanSpares .reman-image, .remanSpares [class*="col-"] .reman-image, .remanSpares .reman-motor-img { display: none !important; visibility: hidden !important; position: absolute !important; /* Pulls it out of the layout document flow completely */ width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } /* 4. Force the content column wrapper to stretch nicely edge-to-edge */ .remanSpares .row > div, .remanSpares [class*="col-"] { display: block !important; width: 100% !important; max-width: 100% !important; flex: none !important; float: none !important; margin: 0 auto !important; padding: 0 20px !important; box-sizing: border-box !important; height: auto !important; } /* 5. Streamline the typography padding to remove desktop layout anchors */ .remanSpares .row .reman-content { padding: 10px 15px !important; /* Tighter padding boundaries */ text-align: left !important; } /* 6. Clean margin pacing on the call to action button */ .remanSpares .reman-content .btn-container { position: relative !important; margin-top: 25px !important; margin-bottom: 5px !important; top: 0 !important; display: block !important; } } /* ========================================================================== MOBILE EDGE PROTECTION: INCREASE PADDING ON VERY SMALL SCREENS (585PX & LOWER) ========================================================================== */ @media screen and (max-width: 585px) { /* Force the main outer section to stay safely contained inside the viewport */ .remanSpares { padding: 40px 15px !important; /* Adds global horizontal cushioning to the outer section */ } /* Force the text content container to squeeze inward from the edge lines */ .remanSpares .row .reman-content { padding: 10px 10px !important; /* Calibrates the typography box tracking bounds */ } } /* ========================================================================== CERTIFIED INDUSTRIAL REPAIR - FIXED HEIGHT DESKTOP OVERRIDES ========================================================================== */ .home-industrial-repair { background-color: #F4F4F4 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; overflow: hidden !important; } .home-industrial-repair .row.no-gutters { margin-right: 0 !important; margin-left: 0 !important; } /* Content Column: Desktop Padding */ .home-industrial-repair .home-repair-content-col { background-color: #F4F4F4 !important; padding: 60px 80px !important; } .home-industrial-repair .home-repair-inner-content { max-width: 550px !important; width: 100% !important; margin: 0 auto !important; } .home-industrial-repair .home-repair-sub { color: #d2232a !important; font-size: 0.9rem !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; display: block !important; margin-bottom: 5px !important; } .home-industrial-repair .home-repair-title { color: #002e4b !important; font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 20px !important; line-height: 1.2 !important; } .home-industrial-repair .home-repair-text { color: #444444 !important; font-size: 1rem !important; line-height: 1.6 !important; margin-bottom: 35px !important; } .home-industrial-repair .home-repair-menu-links { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; } .home-industrial-repair .home-repair-link-btn { background-color: #0066a4 !important; color: #ffffff !important; padding: 14px 20px !important; border-radius: 4px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; text-decoration: none !important; font-weight: 900 !important; font-size: 0.95rem !important; } /* Hover state for the buttons on desktop */ @media screen and (min-width: 992px) { .home-industrial-repair .home-repair-link-btn:hover { background-color: #002136 !important; /* Dark Navy */ color: #ffffff !important; text-decoration: none !important; } } /* Desktop Image Handling: Spans 100% of the parent flex column height */ .home-industrial-repair .home-repair-image-col { padding: 0 !important; margin: 0 !important; } .home-industrial-repair .home-repair-img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; } /* ========================================================================== MOBILE & TABLET ONLY OVERRIDES ========================================================================== */ @media screen and (max-width: 991px) { /* Push the padding out to the edges on mobile devices */ .home-industrial-repair .home-repair-content-col { padding: 40px 20px !important; } .home-industrial-repair .home-repair-title { font-size: 2.1rem !important; } /* Keep the image from collapsing vertically on mobile stacks */ .home-industrial-repair .home-repair-img { height: 350px !important; } /* ---------------------------------------------------------------------- UNCOMMENT THE RULES BELOW TO HIDE THE ROBOT IMAGE ON MOBILE ONLY ---------------------------------------------------------------------- */ /* .home-industrial-repair .home-repair-image-col { display: none !important; } */ } /* ========================================================================== AUTHORIZED INDUSTRIAL REPAIR PROVIDER - HOMEPAGE ONLY ========================================================================== */ .home-auth-provider { background: linear-gradient(90deg, #002e4b 0%, #005a92 100%) !important; margin: 0 !important; padding: 80px 0 !important; width: 100% !important; } /* Header Text Styles */ .home-auth-header-col { margin-bottom: 50px !important; } .home-auth-main-title { color: #ffffff !important; font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 15px !important; } .home-auth-subtitle { color: #e0e0e0 !important; font-size: 1rem !important; line-height: 1.6 !important; max-width: 850px; margin: 0 auto !important; } /* Grid Matrix Handling */ .home-auth-grid-row { display: flex !important; flex-wrap: wrap !important; row-gap: 30px !important; /* Vertical gaps between card rows */ } /* Flex columns allow inner cards to stretch to identical heights per row */ .home-auth-card-col { display: flex !important; } .home-auth-card { background-color: #ffffff !important; border-radius: 6px !important; padding: 30px 25px !important; width: 100% !important; display: flex !important; flex-direction: column !important; box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important; } /* Logo Alignment Box */ .home-auth-logo-wrapper { height: 75px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 25px !important; width: 100% !important; } .home-auth-logo-wrapper img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } .home-auth-card-title { color: #d2232a !important; /* Red highlight header */ font-size: 1.25rem !important; font-weight: 700 !important; margin-bottom: 15px !important; } .home-auth-card-text { color: #444444 !important; font-size: 0.9rem !important; line-height: 1.6 !important; margin: 0 !important; } /* Footer Button Call To Action */ .home-auth-footer-col { margin-top: 50px !important; } /* ========================================================================== AUTHORIZED PROVIDER CTA BUTTON ========================================================================== */ .home-auth-cta-btn { background-color: #0066a4 !important; /* Brand Blue */ color: #ffffff !important; padding: 12px 35px !important; border-radius: 0px !important; /* Crucial: Strips the rounded corners to make it square */ display: inline-block !important; font-weight: 500 !important; text-decoration: none !important; /* font-size: 0.95rem !important; */ /* Structural elements for the flush pseudo-line placement */ position: relative !important; overflow: visible !important; transition: background-color 0.2s ease-in-out !important; } /* The Base State: Left-aligned red accent line, flush against the bottom edge */ .home-auth-cta-btn::after { content: "" !important; position: absolute !important; bottom: 0 !important; /* Pulls it flush right up against the bottom pixel */ left: 0 !important; /* Anchors it firmly to the bottom-left corner */ height: 2px !important; width: 50% !important; /* Exactly half width */ background-color: #d2232a !important; /* Theme Red */ transition: width 0.3s ease-in-out !important; /* Handles the roll-over grow */ } /* Desktop Hover States */ @media screen and (min-width: 992px) { .home-auth-cta-btn:hover { background-color: #002136 !important; /* Deep Dark Navy on rollover */ color: #ffffff !important; text-decoration: none !important; } /* Expands cleanly from left to right on hover */ .home-auth-cta-btn:hover::after { width: 100% !important; } } /* Responsive Mobile Rules */ @media screen and (max-width: 991px) { .home-auth-provider { padding: 50px 20px !important; } .home-auth-main-title { font-size: 2rem !important; } .home-auth-card { padding: 25px 20px !important; } } /* Custom Card Anchor Link Style Resets */ .home-auth-logo-link { display: block !important; width: 100% !important; text-decoration: none !important; } /* Base text structure for the nested card title anchors */ .home-auth-title-link { color: #d2232a !important; /* Theme Red */ font-weight: 900 !important; text-decoration: none !important; transition: color 0.15s ease-in-out !important; } /* Subtle Hover States for the links */ .home-auth-title-link:hover { color: #0066a4 !important; /* Changes to Brand Blue on hover */ font-weight: 900 !important; text-decoration: none !important; } /* Lightly dim the logo on hover to show interactivity */ .home-auth-logo-link:hover .home-auth-logo-wrapper img { opacity: 0.85 !important; } /* ========================================================================== BRANDS WE REPAIR SECTION - HOMEPAGE ONLY ========================================================================== */ .home-brands-repair { background-color: #ffffff !important; margin: 0 !important; padding: 80px 0 !important; width: 100% !important; } /* Ensure the wrapper anchor behaves like a full structural layout element */ .home-brand-link { display: flex !important; width: 100% !important; text-decoration: none !important; } /* Set a smooth transition timing on the image element natively */ .home-brand-logo-card img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; transition: opacity 0.2s ease-in-out !important; /* Smooth fade engine */ } /* On Desktop Rollover, "dull" the inner image opacity down cleanly */ @media screen and (min-width: 992px) { .home-brand-link:hover .home-brand-logo-card img { opacity: 0.65 !important; /* Dull filter drop */ } } .home-brands-header-col { margin-bottom: 50px !important; } .home-brands-main-title { color: #002e4b !important; /* Dark Navy */ font-size: 2.5rem !important; font-weight: 700 !important; margin-bottom: 15px !important; } .home-brands-subtitle { color: #666666 !important; font-size: 1rem !important; line-height: 1.6 !important; max-width: 850px; margin: 0 auto !important; } /* Custom 5-Column Matrix Row */ .home-brands-grid-row { display: flex !important; flex-wrap: wrap !important; margin: 0 -10px !important; /* Standard layout counter gutter */ } /* Desktop: Force exactly 5 elements per horizontal line (100% / 5 = 20%) */ .home-brand-item-col { flex: 0 0 20% !important; max-width: 20% !important; padding: 10px !important; display: flex !important; } /* Individual centered logo boxes */ .home-brand-logo-card { background-color: #ffffff !important; width: 100% !important; height: 100px !important; /* Fixed box container height bounds */ display: flex !important; align-items: center !important; justify-content: center !important; padding: 10px !important; } .home-brand-logo-card img { max-height: 100% !important; max-width: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; } /* ========================================================================== CLONE CTA BUTTON ========================================================================== */ .home-brands-footer-col { margin-top: 50px !important; } .home-brands-cta-btn { background-color: #0066a4 !important; color: #ffffff !important; padding: 12px 35px !important; border-radius: 0px !important; /* Sharp corners */ display: inline-block !important; font-weight: 500 !important; text-decoration: none !important; /* font-size: 0.95rem !important; */ position: relative !important; overflow: visible !important; transition: background-color 0.2s ease-in-out !important; } .home-brands-cta-btn::after { content: "" !important; position: absolute !important; bottom: 0 !important; left: 0 !important; height: 2px !important; width: 50% !important; /* Starts at half width */ background-color: #d2232a !important; transition: width 0.3s ease-in-out !important; } @media screen and (min-width: 992px) { .home-brands-cta-btn:hover { background-color: #002136 !important; /* Dark navy rollover */ color: #ffffff !important; text-decoration: none !important; } .home-brands-cta-btn:hover::after { width: 100% !important; /* Expands full width */ } } /* ========================================================================== RESPONSIVE MATRIX BREAKPOINTS ========================================================================== */ /* Tablet Mode: Break to 3 columns across */ @media screen and (max-width: 991px) and (min-width: 576px) { .home-brand-item-col { flex: 0 0 33.333% !important; max-width: 33.333% !important; } .home-brands-main-title { font-size: 2.1rem !important; } } /* Mobile Phone Mode: Drop cleanly to 2 columns and downscale boxes */ @media screen and (max-width: 575px) { .home-brands-repair { padding: 50px 15px !important; } .home-brands-main-title { font-size: 1.8rem !important; } .home-brand-item-col { flex: 0 0 50% !important; max-width: 50% !important; padding: 8px !important; /* Tighter padding on phone display */ } /* Make the containment heights tighter on mobile so logos look scaled down */ .home-brand-logo-card { height: 70px !important; padding: 5px !important; } }