/* * Ambeat — responsive corrections. * Loaded by mu-plugins/ambeat-responsive.php. * * SCOPE RULE: every rule in this file lives inside a max-width media query. * Desktop (>=1025px) must render exactly as it did before this file existed. * If you add a rule here, it goes inside one of the blocks below — never outside. * * Elementor ids used (from the live DOM, front page id 18): * 73b1dd4 hero

"ANY LOAD, ANY SIZE, ANYWHERE" * cf34b3a hero paragraph * c2d20f4 hero button row * 638db8b "Check Availability" button * 7a38386 "Track your order" trigger (the off-canvas opener) * 6c74c58 header logo image <- NOTE: header, not hero. Easy to confuse. * 5de07f1 "We Connect The Dots…" section heading * 6a1ffed about-section body copy * da1d09a "About us" eyebrow */ /* ============================================================ PHONES AND SMALL TABLETS (<= 767px) ============================================================ */ @media (max-width: 767px) { /* --- 1. Kill the horizontal scrollbar ------------------------------- The root cause is fixed below (the hero h1). This is the belt-and-braces guard so a future widget with a stray desktop offset can never reintroduce a sideways scroll on a phone. */ html, body { max-width: 100%; overflow-x: hidden; } /* --- 2. Header: one row, logo + pill --------------------------------- The header container wraps on a phone, so the logo took one row and the nav pill a second (206px of header before any content). Put them back on a single row: logo left, the burger/search pill sitting to its right. "Get Quote" is dropped on mobile at the user's request — it stays on desktop, which this file cannot reach. */ .elementor-element-28dbd2b { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: space-between !important; /* logo left, pill hard right */ gap: 10px; padding: 8px 12px !important; } .elementor-element-6c74c58 { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; text-align: left !important; } /* The theme sizes the logo as a percentage of its widget, so a max-width alone lands it at ~58% of the intended size. Set width outright. Asset is 298x200, so 104px gives a 104x70 card that balances the pill. */ .elementor-element-6c74c58 img { width: 124px !important; max-width: 124px !important; height: auto !important; } .elementor-element-11badaf, .elementor-element-0746227 { flex: 0 0 auto !important; width: auto !important; max-width: none !important; margin: 0 0 0 auto !important; /* pushes the pill to the far right */ } .elementor-element-0746227 { padding: 6px 16px !important; } /* Get Quote: mobile only. Desktop keeps it. */ .elementor-element-e616d97 { display: none !important; } /* Burger bars are #ff5a6e on a dark pill — unreadable. White on mobile. */ .toggle-lines .toggle-line, .toggle-line { background-color: #ffffff !important; } /* --- 3. Hero box ----------------------------------------------------- Was padding:300px 0 0 40px — a left-only desktop gutter and a 300px top band that left a dead strip of sky under the header. Symmetrical gutter, much less headroom, and real clearance at the bottom so the angled mask cannot ride over the buttons. */ .elementor-element-fcd1d5d { padding-top: 130px !important; padding-left: 20px !important; padding-right: 20px !important; padding-bottom: 72px !important; min-height: 0 !important; height: auto !important; /* The clip is percentage-based and identical at every width, but the DROP is a percentage of HEIGHT while the RUN is a percentage of WIDTH — and the hero's aspect inverts on a phone (1351x768 becomes 375x596). Desktop: run 3% x 1351 = 40px, drop 4% x 768 = 31px, a ratio of 1.32. The same percentages on mobile give 11px against 34px — ratio 0.33, a near-vertical spike instead of a wedge. Desktop's drop is 2.27% of the hero WIDTH; applying that same width percentage here is 8.5px, which on a 596px-tall hero is 1.4%. Run stays at the original 72%->75%, so the notch is 11px x 8px — ratio 1.35, matching desktop. */ clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 75% 100%, 72% 98.6%, 0% 98.6%) !important; } .elementor-element-1aa55e7, .elementor-element-c2d20f4 { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; } /* --- 4. Hero heading ------------------------------------------------- Was 100px desktop type in a 197.64px widget: "ANYWHERE" needed 505px, so the document went to 545px on a 375px screen. Full width, sized up ~13% from the first pass at the user's request, and long words may break. */ .elementor-element-73b1dd4 { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* Centred on mobile (user's choice, 2026-09-11). The hero is left-aligned on desktop only because it is a TWO-COLUMN layout there — copy left, buttons off at x=557. That column structure collapses on a phone, so the reason for the left edge goes with it, and centring puts the hero on the same axis as the About section below, which is centred in both views. */ .elementor-element-73b1dd4 .elementor-heading-title { text-align: center !important; font-size: 2.45rem !important; /* ~39px, was ~34px */ line-height: 1.08 !important; letter-spacing: -0.015em !important; overflow-wrap: break-word; word-break: normal; } /* --- 5. Hero paragraph ----------------------------------------------- The copy carries five hard
s from the desktop layout. On a phone they break the lines early and leave a ragged, half-empty right edge — it reads as if the block were padded. Drop them and let it reflow. */ /* The hero title is pushed down 14px (hero padding-top 116->130). The same 14px comes back out of the gap beneath it — 4px here and 10px off the paragraph's own top padding — so the DESCRIPTION does not move: its text stays at y=240 exactly as before. */ .elementor-element-1aa55e7 { padding-top: 0 !important; } .elementor-element-097c476 { padding: 0 !important; width: 100% !important; max-width: 100% !important; } .elementor-element-cf34b3a { width: 100% !important; max-width: 100% !important; } .elementor-element-cf34b3a br { display: none !important; } .elementor-element-cf34b3a { padding-top: 5px !important; /* see the note above 1aa55e7 */ } .elementor-element-cf34b3a .elementor-heading-title { text-align: center !important; /* see the note on the h1 above */ font-size: 1rem !important; line-height: 1.55 !important; width: 100% !important; max-width: 100% !important; } /* --- 6. Hero call-to-action row -------------------------------------- Both buttons share one row. "Check Availability" is the longer label, so the type and padding come down enough for it to sit on a single line. */ .elementor-element-c2d20f4 { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; justify-content: center !important; gap: 10px; padding-top: 20px !important; } .elementor-element-638db8b, .elementor-element-7a38386 { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; display: flex !important; align-items: stretch !important; } /* The two come from different widgets and resolve to different heights (51px vs 58px), so side by side they sat on different baselines. Pin both to one height and centre the label inside. */ .elementor-element-638db8b .elementor-button, .elementor-element-7a38386 .offcanvas-toggle-btn { height: 54px !important; min-height: 54px !important; display: flex !important; align-items: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Making these flex containers let the toggle shrink to its text (122px in a 163px slot), so the outlined border no longer matched the button beside it. Keep them flex for the vertical centring, but force every level to fill the slot. */ .elementor-element-7a38386 .plus-offcanvas-wrapper, .elementor-element-7a38386 .offcanvas-toggle-wrap { display: flex !important; align-items: stretch !important; height: 54px !important; width: 100% !important; } .elementor-element-7a38386 .offcanvas-toggle-btn { flex: 1 1 auto !important; width: 100% !important; box-sizing: border-box !important; } .elementor-element-7a38386 .plus-offcanvas-wrapper, .elementor-element-7a38386 .plus-offcanvas-inner, .elementor-element-7a38386 .offcanvas-toggle-btn, .elementor-element-638db8b .elementor-button { width: 100% !important; margin: 0 !important; justify-content: center !important; text-align: center !important; white-space: nowrap !important; font-size: 0.6875rem !important; /* ~11px so both labels fit one line */ letter-spacing: 0.02em !important; padding-left: 6px !important; padding-right: 6px !important; } /* The off-canvas wrapper insets its button by 8px a side, leaving the longer label ("Track your order") 147px to render 162px of text — it spilled past the border. Remove the inset and drop the decorative chevron, which buys back the ~14px the label needs. */ .elementor-element-7a38386 .plus-offcanvas-wrapper, .elementor-element-7a38386 .plus-offcanvas-inner { padding-left: 0 !important; padding-right: 0 !important; } .elementor-element-638db8b .elementor-button .btn-icon, .elementor-element-7a38386 .offcanvas-toggle-btn .btn-icon { display: none !important; } /* The two labels sit in different widgets: Elementor's button renders `span.elementor-button-text`, the off-canvas trigger renders `span.btn-text` — and that span carries its OWN 14px / 1px tracking, so styling the buttons alone left the pair visibly mismatched. Set both label spans to the same values. */ .elementor-element-638db8b .elementor-button-text, .elementor-element-7a38386 .btn-text { font-size: 0.6875rem !important; /* 11px on both */ letter-spacing: 0.22px !important; font-weight: 700 !important; line-height: 1.4 !important; } /* --- 7. About section spacing ---------------------------------------- 100px of dead space above the eyebrow, then generous gaps down to the copy. Tighten the whole stack. */ /* The 100px of dead space above the eyebrow is padding on Elementor's generated `.e-con-inner`, NOT on the container element itself — the container reports padding-top:0, so targeting it does nothing. */ .elementor-element-4ab484a > .e-con-inner { padding-top: 22px !important; /* +10px: the whole About stack moves down */ } .elementor-element-4ab484a { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } /* NOTE: 874d7af is an `e-con-full` — it has no `.e-con-inner` child, so the gutter must sit on the element itself. (4ab484a above DOES have one, which is why its padding is targeted differently. Do not assume one shape for both.) */ .elementor-element-874d7af { padding-top: 0 !important; margin-top: 0 !important; padding-left: 20px !important; padding-right: 20px !important; } /* The eyebrow icon-box reserves 86px on a phone against 50px on desktop. */ .elementor-element-da1d09a { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } .elementor-element-da1d09a .elementor-icon-box-wrapper, .elementor-element-da1d09a .elementor-icon-box-icon { margin-bottom: 0 !important; } .elementor-element-da1d09a .elementor-icon-box-content { margin: 0 !important; } /* The eyebrow's own

carries 14px margins top AND bottom, which is most of the 94px the block reserves on a phone (50px on desktop). */ .elementor-element-da1d09a .elementor-icon-box-title { margin-top: 0 !important; margin-bottom: 0 !important; } /* The About column is a flex stack with a ~20px row gap, leaving 22px between the "ABOUT US" accent line and the heading. Pull the heading up so the accent reads as a label belonging to it (~6px), without touching the gap down to the body copy. */ .elementor-element-5de07f1 { margin-top: -14px !important; margin-bottom: 0 !important; } /* --- 8. Section heading ---------------------------------------------- 60px over a 355px column made one heading 396px tall. Sized up ~14% from the first pass at the user's request. */ .elementor-element-5de07f1 .elementor-heading-title { font-size: 2rem !important; /* ~32px, was 28px */ line-height: 1.18 !important; padding-left: 0 !important; padding-right: 0 !important; } /* "We Connect The Dots In The
Logistics Supply Chain" — the desktop break lands mid-phrase once the text already wraps, orphaning "The". */ .elementor-element-5de07f1 .elementor-heading-title br { display: none !important; } /* --- 9. About-section body copy -------------------------------------- This is a heading widget at 30px pinned to a 263px column, so a single paragraph ran 808px tall. Full column, body-copy size, tighter above. */ .elementor-element-6a1ffed { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-top: 8px !important; } .elementor-element-6a1ffed .elementor-heading-title { font-size: 1.0625rem !important; /* ~17px */ line-height: 1.65 !important; text-align: justify !important; /* flush both edges in the column */ text-justify: inter-word; padding-left: 0 !important; /* the gutter is on .e-con-inner now */ padding-right: 0 !important; } /* --- 10. Pages with no hero ------------------------------------------ The header is a transparent overlay (.nxt-trans-overlay) meant to sit on top of a full-bleed hero. /track-shipment/ has no hero, so the heading and the AWB field rendered underneath the logo and the nav pill. The front page is excluded: there the overlay is the design. */ body:not(.home) .site-content { padding-top: 118px; /* header measures 99px once logo + pill share a row */ } /* Comfortable edge gutters for the tracking card on a phone. */ body:not(.home) .awb-tracking-wrapper, body:not(.home) .awb-search-card { margin-left: auto !important; margin-right: auto !important; max-width: 100% !important; } /* --- 11. Tracking widget --------------------------------------------- Stack the field and the button; a side-by-side row leaves the input too narrow to read an AWB number in. iOS zooms any input under 16px, which shifts the whole layout — so the field stays at 16px. */ .awb-search-form { flex-direction: column !important; gap: 10px !important; } .awb-search-form input[type="text"], .awb-search-form input[type="search"], #awb-input { width: 100% !important; font-size: 16px !important; } .awb-search-form button, .awb-track-btn { width: 100% !important; justify-content: center !important; } /* Tracking results: the two-column grid has no room on a phone. */ .awb-results-grid { grid-template-columns: 1fr !important; display: grid !important; gap: 14px !important; } .awb-route-grid, .awb-details-grid { grid-template-columns: 1fr !important; gap: 10px !important; } .awb-card { padding: 16px !important; } /* Long AWB numbers and addresses must wrap, not widen the card. */ .awb-detail-value, .awb-shipment-awb, .awb-route-city, .awb-customer-name { overflow-wrap: break-word; word-break: break-word; } } /* ============================================================ LARGE PHONES IN LANDSCAPE / SMALL TABLETS (768px - 1024px) ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* Still far too large for a tablet column, just less so than on a phone. */ .elementor-element-73b1dd4 { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; } .elementor-element-73b1dd4 .elementor-heading-title { font-size: 3.5rem !important; /* ~56px */ line-height: 1.08 !important; overflow-wrap: break-word; } .elementor-element-5de07f1 .elementor-heading-title { font-size: 2.5rem !important; /* ~40px */ line-height: 1.2 !important; } /* Logo: same desktop offset, same clipping, one size up from phone. */ .elementor-element-6c74c58 { margin-left: 0 !important; } .elementor-element-6c74c58 img { width: 168px !important; max-width: 168px !important; height: auto !important; } body:not(.home) .site-content { padding-top: 200px; } .awb-results-grid { grid-template-columns: 1fr !important; } }