/* ============================================================ USPC RESPONSIVE.CSS — Full mobile rebuild (v49+) Breakpoints: 1200+ desktop (no overrides here) 992-1199 small desktop 768-991 tablet 576-767 large phone <576 phone <360 tiny phone Strategy: progressive enhancement — desktop styles win above 1199px, mobile rules cascade narrower from 991px down. ============================================================ */ /* ---- Global overflow safety net ---- */ html, body { overflow-x: hidden !important; max-width: 100vw; } /* `overflow-x: hidden` forces overflow-y to compute as a scroll container, which silently kills `position: sticky` anywhere on the page (the article sidebar). `clip` blocks horizontal overflow the same way WITHOUT creating a scrollport. It has to go on only: with `overflow-x` set on as well, the body still computes to a scrollport and sticky stays broken. `html` alone is enough for the safety net, because once is not `visible` it is what clips the viewport and 's own overflow is no longer propagated. Wrapped in @supports so browsers without `clip` keep the old `hidden` pair. */ @supports (overflow-x: clip) { html { overflow-x: clip !important; } /* BOTH axes have to be released. Setting only overflow-x leaves the browser computing body as overflow-y:scroll, which is still a scrollport and sticky stays broken. The :not() guards keep the two deliberate scroll locks working (body.uspc-q-lock while the quote modal is open, body.nav-open on mobile). */ body:not(.uspc-q-lock):not(.nav-open) { overflow: visible !important; } } img, video, iframe, svg { max-width: 100%; height: auto; } *, *::before, *::after { box-sizing: border-box; } /* ============================================================ GLOBAL BODY TEXT WEIGHT (locked) Matches the hero .desc weight that Joe approved as the standard. custom.css line 194 sets p { font-weight: 600 } site-wide which made everything look heavy — override here. Tier rules: 400 standard, 500 emphasis. ============================================================ */ p, .services-detail-text p, .uspc-cost-section p, .services-detail-sec p, .built-on-reliability-text p, .heading p, .section-heading p, .accordion-body p, .boxs-sec p, .ser-boxs-box p, .banner_text p, .inner-banner-heading p, .faq_heading p, .what-we-offer-sec p, .uspc-bento-section p, .uspc-process-card p, li { font-weight: 400 !important; } /* Explicit emphasis still gets 500 (use or class="emph") */ p strong, p b, .emph { font-weight: 500 !important; } /* ---- Process Section cards: switch 5-col → 2-col when titles would wrap. Desktop CSS has 5-col grid + breakpoint to 2-col at 991px. But H3 titles like "ORDER BUILT TO SPEC" / "GUARANTEED DELIVERY" start wrapping at ~1500px viewport. Bump the 2-col switch up to 1399px so titles stay clean. ---- */ .uspc-process-card h3 { word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; } @media (max-width: 1399px) { .uspc-process-cards { grid-template-columns: repeat(2, 1fr) !important; gap: 24px !important; } .uspc-process-card { padding: 28px 24px !important; } } @media (max-width: 575px) { .uspc-process-cards { grid-template-columns: 1fr !important; } } /* ---- Inner banner H1 inherits the same styles as the H2 (some pages now use H1 for SEO) ---- */ .inner-banner-heading h1 { color: #fff; font-size: 72px !important; font-weight: 900 !important; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.5px; margin: 0 0 16px; } /* ---- Force text wrap on big headings so they never bleed past their container ---- */ .ser-boxs-box h2, .ser-boxs-box h3, .uspc-bento-card h3, .what-we-offer-sec .shipsol_main_txt h3, .uspc-review-meta .uspc-review-name, .faq_heading h2, .faq_heading h3, .banner_text h1, .banner_text h2, .uspc-hero-form-bar .label, .uspc-bento-section .section-heading h2, .heading h2 { overflow-wrap: break-word; word-wrap: break-word; word-break: normal; hyphens: auto; max-width: 100%; } /* ---- Hero background warehouse image: scale fluidly with the viewport ---- Desktop default in custom.css is a fixed 861px width which overflows when the window shrinks below ~1500px. Make it scale instead. ---- */ .banner-images-shape img { width: clamp(480px, 56vw, 861px) !important; height: 100vh; max-height: 760px; } .banner-images-shape { max-width: 60vw; overflow: hidden; } /* ---- Value props H2: fluid scaling + force wrap so it never overflows narrow columns ---- custom.css line 5881-5883 sets word-break:keep-all + overflow-wrap:normal + hyphens:none which prevents wrapping at spaces. We override those here. ---- */ .ser-boxs-box h2 { font-size: clamp(20px, 1.7vw, 36px) !important; line-height: 1.1 !important; word-break: normal !important; overflow-wrap: break-word !important; hyphens: auto !important; white-space: normal !important; } .ser-boxs-box h3 { font-size: clamp(13px, 0.95vw, 20px) !important; line-height: 1.2; white-space: normal; word-break: normal; overflow-wrap: break-word; } .ser-boxs-box p { font-size: clamp(13px, 0.85vw, 16px) !important; line-height: 1.55; } .ser-boxs-box { /* No overflow:hidden — we want the text to wrap, not clip */ overflow: visible; } /* ---- 1200-1499px laptop range tweaks ---- */ @media (min-width: 1200px) and (max-width: 1499px) { /* Header: tighten phone + CTA so they fit col-lg-3 without truncation */ section.header .container-fluid.add-padding { padding: 0 28px !important; } section.header .uspc-header-phone { font-size: 14px !important; gap: 6px; } section.header .uspc-header-phone i { font-size: 13px !important; } section.header .theme-btn-1 { padding: 7px 7px 7px 14px !important; font-size: 12px !important; letter-spacing: 0 !important; white-space: nowrap; } section.header .theme-btn-1 span { width: 30px !important; height: 30px !important; } section.header .head-btns { gap: 6px; flex-wrap: nowrap; } /* Nav: tighter spacing */ section.header .nav.stroke ul.menu li a { padding: 8px 10px !important; font-size: 14px !important; } } /* ---- Narrow laptop fallback (1200-1279px): even tighter ---- */ @media (min-width: 1200px) and (max-width: 1279px) { section.header .theme-btn-1 { font-size: 12px !important; padding: 6px 6px 6px 12px !important; } section.header .nav.stroke ul.menu li a { padding: 6px 7px !important; font-size: 13px !important; } } /* ---- Header CTA: make it shrinkable + truncate gracefully so it never overflows ---- */ section.header .header-btn { min-width: 0; display: flex; justify-content: flex-end; } /* Kill legacy -15% negative left margin + space-between that cause overlap */ section.header ul.head-btns { margin-left: 0 !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 16px !important; width: 100%; padding-right: 0; } section.header .head-btns li { min-width: 0; flex-shrink: 1; display: flex; align-items: center; } section.header .uspc-header-phone { white-space: nowrap; min-width: 0; } section.header .theme-btn-1 { min-width: 0; flex-shrink: 0; white-space: nowrap; } /* At 1500-1799px range, shrink phone + CTA slightly so they don't crowd each other */ @media (min-width: 1500px) and (max-width: 1799px) { section.header .uspc-header-phone { font-size: 15px !important; gap: 8px; } section.header ul.head-btns i.fa-phone { width: 34px !important; height: 34px !important; } section.header .theme-btn-1 { padding: 8px 8px 8px 16px !important; font-size: 13px !important; } section.header .theme-btn-1 span { width: 36px !important; height: 36px !important; } } /* At narrower desktop widths, swap full CTA text for a shorter label */ @media (min-width: 1200px) and (max-width: 1399px) { section.header .head-btns .theme-btn-1 { font-size: 11px !important; letter-spacing: 0; padding: 6px 4px 6px 10px !important; } section.header .head-btns .theme-btn-1 span { width: 32px !important; height: 32px !important; margin-left: 6px; } } /* Very tight: drop "REQUEST FREE" prefix via aria-friendly text replacement */ @media (min-width: 1200px) and (max-width: 1319px) { section.header .head-btns li:last-child .theme-btn-1 { font-size: 0 !important; padding: 6px 6px !important; } section.header .head-btns li:last-child .theme-btn-1::before { content: "Quote"; font-size: 12px; font-weight: 800; text-transform: uppercase; color: inherit; } } /* ---- Mobile nav toggle + mobile click-to-call (hidden by default) ---- */ .mobile-nav-toggle { display: none; } .mobile-nav-overlay { display: none; } .mobile-call-btn { display: none; } /* ============================================================ ≤ 1199px — collapse to mobile nav + stacked hero (Desktop nav + side-by-side hero only above 1199px) ============================================================ */ @media (max-width: 1199px) { /* ----- Containers ----- */ .container-fluid.add-padding { padding: 0 24px; } /* ----- Utility bar ----- */ .uspc-utility-bar { font-size: 13px !important; padding: 10px 16px !important; line-height: 1.3; } /* ----- Header: hide desktop nav + CTAs, show hamburger ----- Use high-specificity selectors to beat the base ul.head-btns rules earlier in this file ----- */ section.header { padding: 12px 0 !important; background: rgba(255, 255, 255, 0.97) !important; } section.header .row { flex-wrap: nowrap !important; align-items: center; } section.header .col-lg-2, section.header .col-md-6 { flex: 0 0 auto; width: auto !important; max-width: none; } section.header .col-lg-7, section.header .nav.stroke { display: none !important; } section.header .col-lg-3 { flex: 1 1 auto; width: auto !important; max-width: none; display: flex; justify-content: flex-end; } section.header .hdr_logo img { height: 48px !important; width: auto !important; } section.header .head-btns, section.header ul.head-btns, section.header .header-btn ul.head-btns, section.header .head-btns li { display: none !important; } section.header .uspc-header-phone, section.header .theme-btn-1 { display: none !important; } /* Centered click-to-call link between logo and hamburger — matches desktop phone style */ section.header .container-fluid.add-padding > .row { position: relative; } .mobile-call-btn { display: inline-flex !important; align-items: center; gap: 10px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: transparent !important; color: #1E2A9C !important; text-decoration: none !important; padding: 0; border-radius: 0; font-size: 17px; font-weight: 700; white-space: nowrap; z-index: 5; box-shadow: none; } .mobile-call-btn i { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; background: #2942d14d; color: #1E2A9C !important; border-radius: 50%; font-size: 14px; } .mobile-call-btn:hover { color: var(--uspc-red, #C8102E) !important; } .mobile-call-btn:hover i { background: rgba(200, 16, 46, 0.18); color: var(--uspc-red, #C8102E) !important; } .mobile-nav-toggle { display: inline-flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--uspc-red, #C8102E) !important; color: #fff !important; border: none; border-radius: 8px; font-size: 22px; cursor: pointer; box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3); transition: background .2s ease, transform .2s ease; } .mobile-nav-toggle:hover { background: var(--uspc-red-dark, #A00D25) !important; transform: scale(1.05); } .mobile-nav-toggle i { color: #fff !important; } /* Mobile nav overlay */ .mobile-nav-overlay { position: fixed; inset: 0; background: linear-gradient(160deg, #1d2e9f 0%, #15238c 50%, #0a1670 100%); z-index: 9999; padding: 88px 28px 32px; overflow-y: auto; transform: translateX(100%); transition: transform .3s ease; display: block !important; visibility: hidden; } .mobile-nav-overlay.show { transform: translateX(0); visibility: visible; } .mobile-nav-overlay .close-btn { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; background: transparent !important; border: 2px solid #fff !important; border-radius: 8px; color: #fff !important; font-size: 22px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; } .mobile-nav-overlay ul { list-style: none; padding: 0; margin: 0; } .mobile-nav-overlay > ul > li { border-bottom: 1px solid rgba(255, 255, 255, 0.18); } .mobile-nav-overlay > ul > li > a { display: block !important; padding: 20px 4px !important; color: #fff !important; font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none !important; } .mobile-nav-overlay > ul > li > a:hover { color: #C8102E !important; } .mobile-nav-overlay .mobile-cta-stack { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; } .mobile-nav-overlay .mobile-cta-stack a { display: flex !important; justify-content: center; align-items: center; background: var(--uspc-red, #C8102E) !important; color: #fff !important; padding: 16px 20px !important; font-weight: 800; text-transform: uppercase; text-decoration: none !important; border-radius: 8px; font-size: 16px; box-shadow: 0 4px 12px rgba(200, 16, 46, 0.3); } .mobile-nav-overlay .mobile-cta-stack a.phone { background: #fff !important; color: var(--uspc-navy, #1E2A9C) !important; } body.nav-open { overflow: hidden; } /* ----- Hero banner (homepage) ----- */ .banner-images-shape { display: none !important; } .banner_sec { padding: 110px 0 50px !important; min-height: auto !important; height: auto !important; } .banner_sec::before { display: none; } .banner_sec .container-fluid.hei { height: auto !important; } .banner_sec .row.hei { height: auto !important; align-items: flex-start !important; } .banner_sec .col-xl-6, .banner_sec .col-lg-6, .banner_sec .col-md-6 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; } /* override custom.css align-items:start so children center horizontally */ .banner_text { text-align: center !important; padding: 0 !important; padding-bottom: 0 !important; align-items: center !important; justify-content: center !important; width: 100%; } .banner_text > * { margin-left: auto !important; margin-right: auto !important; } .banner_text label, .banner_text > p:first-child label { font-size: 14px; } .banner_text h1 { font-size: 44px !important; line-height: 1.05 !important; margin: 14px auto 16px !important; } .banner_text h2 { font-size: 22px !important; line-height: 1.25; margin: 0 auto 18px !important; } .banner_text p { font-size: 16px !important; line-height: 1.5; width: 100% !important; max-width: 640px; } .banner_text ul { display: flex !important; flex-direction: column; gap: 12px; align-items: center !important; padding: 0; margin-top: 24px; justify-content: center; } .banner_text ul li { width: 100%; max-width: 340px; } .banner_text ul li a.theme-btn-1 { width: 100%; display: flex !important; justify-content: space-between !important; align-items: center; } .banner_images { margin: 28px auto 0 !important; max-width: 480px; position: relative !important; z-index: 1 !important; padding: 0 16px; } .banner_images img { width: 100%; height: auto; } .banner_sec .banner-social-link { display: none !important; } /* ----- Inner page banner (about/services/contact/etc.) ----- */ .inner-banner-sec { padding: 100px 0 50px !important; min-height: auto !important; } .inner-banner-heading h1, .inner-banner-heading h2 { font-size: 44px !important; line-height: 1.05 !important; color: #fff !important; font-weight: 900 !important; text-transform: uppercase; } .inner-banner-heading p { font-size: 16px !important; } /* ----- Quote form bar (used on every page) ----- */ .uspc-hero-form-bar { padding: 24px 0 !important; } .uspc-hero-form-bar .bar-inner { flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } .uspc-hero-form-bar .label { font-size: 22px !important; white-space: normal !important; justify-content: center !important; text-align: center; gap: 10px !important; } .uspc-hero-form-bar .label i { font-size: 18px !important; } .uspc-hero-form-bar .form-group { width: 100%; } .uspc-hero-form-bar .form-fields { flex-direction: column !important; gap: 10px !important; width: 100%; } .uspc-hero-form-bar input { width: 100% !important; min-width: 0 !important; font-size: 16px !important; /* prevents iOS auto-zoom on focus */ padding: 14px 16px !important; } .uspc-hero-form-bar .or-call-row { font-size: 13px; } .uspc-hero-form-bar .cta-left-arrow { display: inline-flex !important; justify-content: center !important; width: auto; align-self: center; padding: 16px 28px !important; font-size: 16px !important; } /* ----- Value props (4-col → 1-col) ----- */ .boxs-sec.sec { padding: 60px 0 30px !important; } .boxs-sec .row > [class*="col-"] { margin-bottom: 18px; } .ser-boxs-box { text-align: center; padding: 22px 18px !important; height: auto !important; min-height: 0 !important; } .ser-boxs-box h2 { font-size: 22px !important; line-height: 1.15; margin-bottom: 8px; } .ser-boxs-box h3 { font-size: 14px !important; margin-bottom: 12px; } .ser-boxs-box p { font-size: 14px !important; line-height: 1.55; margin-bottom: 0; } /* ----- Testimonials top heading ----- */ .testimonial.sec { padding: 50px 0 30px !important; } .testimonial.sec .heading h2 { font-size: 32px !important; line-height: 1.1; } .testimonial.sec .heading h3 { font-size: 16px !important; } /* ----- Bento section ----- */ .uspc-bento-section { padding: 50px 0 !important; } .uspc-bento-section .section-heading h2 { font-size: 36px !important; line-height: 1.1; } .uspc-bento-section .section-heading h3 { font-size: 15px !important; line-height: 1.5; } /* Cards must grow with content so the CTA never gets cut off */ .uspc-bento-card, .uspc-bento-card.featured { height: auto !important; min-height: 0 !important; } .uspc-bento-card .bg-img { height: auto !important; flex: 0 0 auto !important; aspect-ratio: 16 / 9; } .uspc-bento-card.featured .bg-img { height: auto !important; flex: 0 0 auto !important; aspect-ratio: 16 / 10; } .uspc-bento-card .card-content { padding: 20px 22px 24px !important; } /* ----- Featured Products section (home) ----- */ .what-we-offer-sec { padding: 50px 0 !important; } .what-we-offer-sec .what-we-offer-row { padding: 40px 22px !important; border-radius: 14px !important; } .what-we-offer-sec .what-we-offer-row .heading h2 { font-size: 30px !important; line-height: 1.1; } .what-we-offer-sec .what-we-offer-row .heading p { font-size: 14px !important; } .what-we-offer-sec .what-we-offer-row .row { row-gap: 22px; } .what-we-offer-sec .what-we-offer-row .row > [class*="col-"] { margin-bottom: 22px !important; } .what-we-offer-sec .what-we-offer-row .row > [class*="col-"]:last-child { margin-bottom: 0 !important; } .what-we-offer-sec .shipsol_main { margin-bottom: 0 !important; } .what-we-offer-sec .shipsol_main_img img { height: 200px !important; } /* ----- Industries scrolling band ----- */ .serving-the-industries-sec { padding: 50px 0 !important; } .serving-the-industries-heading h2 { font-size: 32px !important; line-height: 1.15; text-align: center; } .uspc-logo-track .serving-the-industries-silder-items { flex: 0 0 130px !important; width: 130px !important; } .uspc-logo-track .serving-the-industries-silder-items span { width: 130px !important; height: 110px !important; } .uspc-logo-track .serving-the-industries-silder-items span img { width: 70px !important; height: 70px !important; } /* ----- FAQ ----- */ .faq.sec { padding: 50px 0 !important; } /* Tighter side padding so the accordion bars span more of the viewport */ .faq.sec .container-fluid { padding-left: 12px !important; padding-right: 12px !important; } .faq_wrapper { padding: 0 !important; } .faq_wrapper .row { margin-left: 0 !important; margin-right: 0 !important; } .faq_wrapper .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; margin-bottom: 24px; padding-left: 4px !important; padding-right: 4px !important; } .faq_heading { text-align: center; padding: 0; } .faq_heading h2 { font-size: 36px !important; } .faq_heading h3 { font-size: 20px !important; } .faq_heading p { font-size: 15px !important; } .faq_heading .theme-btn-1 { display: inline-flex; } .faq_right { padding: 0 !important; } .faq_right .accordion, .faq_right .accordion-item { width: 100%; } .faq_right .accordion-button { font-size: 15px !important; padding: 16px 48px 16px 18px !important; line-height: 1.3; } /* Kill the desktop 150px-left-margin on the accordion body — wastes 150px of mobile screen */ .faq_right .accordion-body { margin: 0 !important; padding: 16px 18px 18px 22px !important; } .faq_right .accordion-body p { font-size: 14px !important; line-height: 1.55; } /* ----- Map ----- */ .map-main-sec { padding: 50px 0 !important; } .map-main-sec .heading h2 { font-size: 32px !important; } .map-main-sec iframe { height: 320px !important; } /* ----- Footer ----- */ .footer-sec { padding: 0 !important; } .footer-lets-talk-box { padding: 50px 16px !important; text-align: center; } .footer-lets-talk-box h2 { font-size: 36px !important; line-height: 1.1; } .footer-lets-talk-box h3 { font-size: 16px !important; margin-bottom: 24px; } .footer-lets-talk-box .ft-btns { display: flex !important; flex-direction: column; gap: 12px; align-items: center !important; justify-content: center; } .footer-lets-talk-box .ft-btns a { width: 100%; max-width: 320px; display: flex !important; justify-content: space-between !important; align-items: center; } .footer-bottom-sec { padding: 40px 0 30px !important; } .footer-bottom-sec .row { row-gap: 30px; } .footer-bottom-sec .row > [class*="col-"] { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; text-align: center !important; } .footer-bottom-sec .footer-bottom-logo, .footer-bottom-sec .footer-bottom-logo a { display: flex; justify-content: center; } /* "Follow us" block */ .footer-bottom-sec .banner-social-link { position: static !important; padding: 24px 0 0 !important; left: auto !important; bottom: auto !important; display: block; text-align: center !important; } .footer-bottom-sec .banner-social-link h3 { margin: 0 auto 14px !important; text-align: center !important; display: inline-block; border-bottom: 1px solid #fff; padding-bottom: 8px; width: auto !important; } .footer-bottom-sec .banner-social-link ul { display: flex !important; justify-content: center !important; flex-wrap: wrap; gap: 18px !important; padding: 0 !important; margin: 0 !important; } .footer-bottom-sec .banner-social-link ul li::after, .footer-bottom-sec .banner-social-link ul li:after { display: none !important; content: none !important; } /* Section headings ("Contact Information", "Quick Links") — center the underline, force the wrapper to be block-level so the list below doesn't flow alongside it */ .footer-bottom-sec .footer-bottom-link { text-align: center; } .footer-bottom-sec .footer-bottom-link h2 { font-size: 22px !important; margin: 0 auto 18px !important; display: table !important; /* hugs content width but is block-level */ width: auto !important; text-align: center !important; } /* Quick Links list — center each link */ .footer-bottom-sec .footer-bottom-link ul { display: flex !important; flex-direction: column; align-items: center !important; gap: 4px; padding: 0 !important; } .footer-bottom-sec .footer-bottom-link ul li { margin: 0 !important; text-align: center; } .footer-bottom-sec .footer-bottom-link ul li a { padding: 8px 0; display: inline-block; } /* Contact Information items — left-aligned column, all icons stack on left edge, whole block centered within its parent so it sits in the middle of the footer. Use display: flex (not inline-flex) + margin auto so it acts as a centered block. */ .footer-bottom-sec .footer-bottom-link.contect-footer ul { display: flex !important; flex-direction: column; align-items: flex-start !important; gap: 0; margin: 0 auto !important; text-align: left; width: auto; max-width: 320px; } /* Quick Links — match the Contact Information layout exactly: red circle icon on the left, text on the right, centered as a 320px block */ .footer-bottom-sec .footer-bottom-link:not(.contect-footer) ul { display: flex !important; flex-direction: column; align-items: flex-start !important; width: auto; max-width: 320px; margin: 0 auto !important; text-align: left; padding-left: 0 !important; gap: 4px; } .footer-bottom-sec .footer-bottom-link:not(.contect-footer) ul li { text-align: left; width: 100%; margin: 0 !important; } .footer-bottom-sec .footer-bottom-link:not(.contect-footer) ul li a { display: flex !important; align-items: center; gap: 14px; text-align: left; padding: 6px 0; line-height: 1.4; } .footer-bottom-sec .footer-bottom-link:not(.contect-footer) ul li a i { flex: 0 0 36px; background: var(--uspc-red, #C8102E); color: #fff !important; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .footer-bottom-sec .footer-bottom-link.contect-footer ul li { margin-bottom: 18px !important; width: 100%; display: block; text-align: left; } .footer-bottom-sec .footer-bottom-link.contect-footer ul li:last-child { margin-bottom: 0 !important; } .footer-bottom-sec .footer-bottom-link.contect-footer ul li a { display: flex !important; align-items: flex-start !important; gap: 14px; text-align: left; line-height: 1.4; width: 100%; } .footer-bottom-sec .footer-bottom-link.contect-footer ul li a i { margin-top: 2px !important; flex: 0 0 36px; background: var(--uspc-red, #C8102E); color: #fff !important; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; } .footer-copy-right-sec { padding: 18px 16px !important; text-align: center; font-size: 13px; } /* ----- Services overview / category tile pages (services.html and similar) ----- */ .inner-banner-sec.servicespg-banner { padding: 100px 0 50px !important; } .service-inner-sec .sub-heading-inner-services h2 { font-size: 20px !important; padding: 14px 22px !important; } .service-inner-sec .shipsol_main { height: auto !important; min-height: 0 !important; } .service-inner-sec .shipsol_main_img { height: 150px !important; flex: 0 0 150px !important; } .service-inner-sec .shipsol_main_txt h3 { font-size: 14px !important; } } /* ============================================================ ≤ 767px — phones (large + standard) ============================================================ */ @media (max-width: 767px) { .container-fluid.add-padding { padding: 0 18px; } section.header { padding: 10px 0 !important; } section.header .hdr_logo img { height: 42px !important; } /* Hero a bit tighter */ .banner_sec { padding: 95px 0 40px !important; } .banner_text h1 { font-size: 38px !important; } .banner_text h2 { font-size: 20px !important; } .inner-banner-sec, .inner-banner-sec.servicespg-banner { padding: 90px 0 40px !important; } .inner-banner-heading h2 { font-size: 38px !important; } .uspc-hero-form-bar .label { font-size: 20px !important; } /* Section padding tighter still */ .boxs-sec.sec { padding: 40px 0 10px !important; } .testimonial.sec, .uspc-bento-section, .what-we-offer-sec, .serving-the-industries-sec, .faq.sec, .map-main-sec { padding: 40px 0 !important; } .ser-boxs-box h2 { font-size: 20px !important; } .uspc-bento-section .section-heading h2 { font-size: 30px !important; } .what-we-offer-sec .what-we-offer-row .heading h2 { font-size: 26px !important; } .footer-lets-talk-box h2 { font-size: 32px !important; } } /* ============================================================ ≤ 575px — small phones (iPhone SE class) ============================================================ */ @media (max-width: 575px) { .container-fluid.add-padding { padding: 0 16px; } .banner_text h1 { font-size: 36px !important; } .banner_text h2 { font-size: 18px !important; } .inner-banner-heading h2 { font-size: 36px !important; } .uspc-hero-form-bar .label { font-size: 18px !important; } .uspc-bento-section .section-heading h2 { font-size: 26px !important; } .what-we-offer-sec .what-we-offer-row .heading h2 { font-size: 24px !important; } .footer-lets-talk-box h2 { font-size: 28px !important; } /* Tighten reviews padding even more */ .uspc-review-card .uspc-review-inner { padding: 26px 22px !important; min-height: 220px !important; } .uspc-review-meta .uspc-review-name { font-size: 18px !important; } .uspc-review-text { font-size: 14px !important; } /* Services overview tiles 1-up on phone */ .service-inner-sec .col-md-6 { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; } } /* ============================================================ ≤ 360px — tiny phones (older Androids, iPhone mini) ============================================================ */ @media (max-width: 360px) { .banner_text h1 { font-size: 32px !important; } .banner_text h2 { font-size: 16px !important; } .ser-boxs-box h2 { font-size: 18px !important; } .inner-banner-heading h2 { font-size: 32px !important; } .uspc-bento-section .section-heading h2 { font-size: 22px !important; } } /* ============================================================ Touch-target minimum 44x44 for accessibility (mobile + tablet) ============================================================ */ @media (max-width: 991px) { a.theme-btn-1, .uspc-cta-btn, .accordion-button { min-height: 48px; } .head-btns li a, .footer-bottom-link ul li a, .contect-footer ul li a { min-height: 44px; } } /* ========================================================================== MOBILE POLISH — loaded last so it wins over custom.css ========================================================================== */ @media (max-width: 767px){ /* 0. Hero sat 122px below the header on a phone: 150px section padding plus 40px on .hero-content, while the header is only ~122px tall. */ .uspc-hero{ padding-top:96px !important; } .uspc-hero .hero-content{ padding-top:0 !important; } /* 1. Section rhythm. 80-90px top AND bottom stacked ~180px of dead space between sections on a phone. */ .services-detail-sec.sec, .uspc-process-section, .uspc-cost-section, .uspc-products-section, .uspc-related{ padding-top:48px !important; padding-bottom:48px !important; } .uspc-process-section .section-heading, .uspc-products-section .section-heading{ margin-bottom:28px !important; } /* 2. Headings: a global !important was forcing 50px on phones, and the global word-break:break-word then split words mid-letter ("MANUFACTU / RE"). */ .services-detail-text h2, .uspc-process-section .section-heading h2, .uspc-cost-section h2, .uspc-products-section .section-heading h2, .uspc-related h2, .faq_heading h2{ font-size:30px !important; line-height:1.12 !important; letter-spacing:-0.2px !important; word-break:normal !important; overflow-wrap:normal !important; hyphens:none !important; } /* 3. Product cards: the navy container was eating 90px of side padding, squeezing the white cards and the photos inside them. */ .uspc-products-container{ padding:26px 12px !important; border-radius:14px !important; } .uspc-products-section .container-fluid.add-padding{ padding-left:10px !important; padding-right:10px !important; } .uspc-product-grid{ grid-template-columns:1fr !important; gap:16px !important; } /* 4. Footer. Logo + "Follow Us" + social icons stay CENTRED; the two text blocks below them are left aligned and spaced apart. */ .footer-bottom-sec .row{ row-gap:0 !important; } /* centred block */ .footer-bottom-sec .footer-bottom-logo, .footer-bottom-sec .footer-bottom-logo a{ display:flex !important; justify-content:center !important; } .footer-bottom-sec .banner-social-link{ text-align:center !important; padding-left:0 !important; margin-bottom:46px !important; } .footer-bottom-sec .banner-social-link h3{ text-align:center !important; margin-left:auto !important; margin-right:auto !important; } .footer-bottom-sec .banner-social-link ul{ justify-content:center !important; padding-left:0 !important; } /* left aligned blocks */ .footer-bottom-sec .footer-bottom-link, .footer-bottom-sec .footer-bottom-link.contect-footer{ text-align:left !important; padding-left:0 !important; } .footer-bottom-sec .footer-bottom-link h2{ text-align:left !important; margin-left:0 !important; margin-right:auto !important; } .footer-bottom-sec .footer-bottom-link ul{ justify-content:flex-start !important; align-items:flex-start !important; padding-left:0 !important; } .footer-bottom-sec .contect-footer{ margin-bottom:46px !important; } /* 5. The two full-width red CTA bars. Both labels are white-space:nowrap so they sit on one line beside the button on desktop. On a phone that makes a 500px line of text inside a 375px screen — it does not create a scrollbar because the bar clips, it just silently cuts the headline off at both ends. Let them wrap. */ .uspc-custom-bar .label, .uspc-hero-form-bar .label{ white-space:normal !important; display:block !important; max-width:100% !important; font-size:24px !important; line-height:1.15 !important; text-wrap:balance; } .uspc-custom-bar .label i, .uspc-hero-form-bar .label i{ display:none !important; } } /* Footer hours is plain text, not a link — match the link styling so the row still lines up with the address/phone/email above it. */ .footer-bottom-sec .contect-footer .no-link{ display:flex; align-items:flex-start; gap:10px; cursor:default; } .footer-bottom-sec .contect-footer .no-link i{ margin-top:7px; color:#bf0018; } @media (max-width: 767px){ .footer-bottom-sec .footer-bottom-link.contect-footer ul li .no-link{ display:flex !important; align-items:flex-start !important; gap:14px; text-align:left; line-height:1.4; width:100%; } .footer-bottom-sec .footer-bottom-link.contect-footer ul li .no-link i{ margin-top:2px !important; flex:0 0 36px; background:var(--uspc-red, #C8102E); color:#fff !important; width:36px; height:36px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:14px; } }