@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@500;600;700;800&display=swap");
/* Shared branded preloader; retain the existing page-load dismissal. */
.preloader-wrap, .preloader-wrap::before { background: #06265e !important; }
.preloader-wrap .preloader { background-image: none !important; }
.preloader-wrap .preloader::before {
 content: "";
 position: absolute;
 top: 50%; left: 50%;
 width: 56px; height: 56px;
 margin: -40px 0 0 -28px;
 box-sizing: border-box;
 border: 3px solid rgba(255,255,255,.2);
 border-top-color: #ff7a1a;
 border-right-color: #fff;
 border-radius: 50%;
 animation: marlett-loading-spin 1s linear infinite;
}
.preloader-wrap .preloader::after {
 content: "Loading";
 position: absolute;
 top: calc(50% + 34px); left: 0;
 width: 100%; text-align: center;
 color: #fff;
 font: 600 14px/1.5 "Urbanist", sans-serif;
 letter-spacing: .12em;
}
@keyframes marlett-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
 .preloader-wrap .preloader::before { animation: none; }
}
.marlett-reliable-image { position: relative; min-height: 360px; overflow: hidden; background: #fff; }
.marlett-reliable-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Marlett Shipping ? shared brand palette and supplied logo presentation. */
:root {
 --marlett-navy: #06265e;
 --marlett-orange: #ff7a1a;
 --primary-color-one: #06265e;
 --primary-color-two: #06265e;
 --primary-color-three: #f2f5fa;
 --secondary-color-one: #ff7a1a;
 --secondary-color-two: #fff3e9;
 --primary-color-five: #041b43;
 --heading-dark: #06265e;
 --link-color-dark: #06265e;
 --menu-color: #06265e;
 --menu-active-color: #c34d00;
 --footer-default-bgcolor: #041b43;
 --preloader-background-color: #06265e;
 --bs-primary: #06265e;
 --bs-primary-rgb: 6,38,94;
}
/* Crop the generous white margins in layout; the original image stays intact. */
img[src*="marlett-shipping-logo"] {
 width: 240px !important;
 max-width: 100% !important;
 height: auto !important;
 aspect-ratio: 3.7;
 object-fit: cover !important;
 object-position: 50% 47%;
 background: #fff;
}
img.footer_logo { width: 280px !important; border-radius: 6px; }
img.wc-user-img { width: 92px !important; border-radius: 4px !important; }
.header_logo_box .navbar-brand { max-width: 100%; margin-right: 0; }
.theme-btn.one, .theme-btn.two, .btn-primary {
 background: #ff7a1a !important;
 border-color: #ff7a1a !important;
 color: #06265e !important;
}
.theme-btn.one:hover, .theme-btn.two:hover, .btn-primary:hover {
 background: #06265e !important;
 border-color: #06265e !important;
 color: #fff !important;
}
.theme-btn.three { border-color: #ff7a1a !important; color: #ff7a1a !important; }
.theme-btn.three:hover { background: #ff7a1a !important; color: #06265e !important; }
::selection { background: #ff7a1a; color: #06265e; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
 outline: 3px solid #ff7a1a; outline-offset: 3px;
}
.before_title, .title_sections .before_title { color: #c34d00; }
.light_color .before_title, .before_title.color_white { color: #ff9a4d !important; }
.shplinks { background-color: #06265e !important; }
.shplinks a { color: #fff !important; }
.shplinks a:hover { color: #ff9a4d !important; }

.banner-section .mtop-search {
 background: rgba(255,255,255,.94) !important;
 border: none;
 box-shadow: 0 12px 36px rgba(6,38,94,.12);
}
.banner-section .shplinks { background: transparent !important; color: #06265e; }
.banner-section .shplinks a { color: #06265e !important; }
.banner-section .shplinks a:hover { color: #b74700 !important; }

/* Keep the full branded promotional artwork visible on every page. */
body .promobar { height: auto; max-height: none; background: #fff8ed; color: #06265e; }
body .promobar :is(h1, h2, h3, p, .title_sections) { color: #06265e !important; }
body .promobar > .row { margin-inline: 0; align-items: center; }
body .promobar img[src*="marlett-ship-both-ways"] { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
/* Navy calls to action on the milk-coloured promotional panel. */
body .promobar .theme-btn.one {
 background: #06265e !important; color: #fff !important;
 border-color: #06265e !important;
}
body .promobar .theme-btn.one:hover {
 background: #041b43 !important; color: #fff !important;
 border-color: #041b43 !important;
}
body .promobar .theme-btn.one:is(:active, .active) {
 background: #041b43 !important; color: #fff !important;
 border-color: #041b43 !important;
 box-shadow: inset 0 -3px 0 #ff7a1a !important;
}

/* The hero is now a Swiper: each slide carries its own <picture>. The section
   itself must stay background-free, otherwise the browser downloads the old
   1.9MB PNG on top of the WebP slides. */
#sldseries { background-image: none !important; }

/* Keep the flyer contact addresses readable in narrow footer columns. */
.footer_area .con_content a[href^="mailto:"], .contact_box_content a[href^="mailto:"] { overflow-wrap: anywhere; }

/* Consistent, responsive footer layout across all pages. */
.marlett-footer { background: #041b43; color: #ccd6e5; padding: 64px 0 0; }
.marlett-footer-grid { display: grid; grid-template-columns: minmax(300px,1.7fr) repeat(3,minmax(0,1fr)); gap: 44px; padding-bottom: 44px; }
.marlett-footer .footer_logo { display: block; width: 250px !important; margin: 0 0 22px; }
.marlett-footer address { font-style: normal; font-size: 14px; line-height: 1.8; margin-bottom: 22px; color: #ccd6e5; }
.marlett-footer a { color: #ccd6e5; text-decoration: none; font-size: 14px; line-height: 1.7; }
.marlett-footer a:hover { color: #ff9a4d; }
.marlett-contact-row { display: flex; gap: 12px; margin: 0 0 14px; align-items: flex-start; }
.marlett-contact-row > .fa { color: #ff7a1a; width: 18px; text-align: center; margin-top: 6px; flex-shrink: 0; }
.marlett-contact-row > div { min-width: 0; }
.marlett-contact-row a { display: block; overflow-wrap: anywhere; }
.marlett-contact-label { display: block; color: #fff; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; line-height: 1.5; margin-bottom: 2px; }
.marlett-footer-nav h2 { color: #fff; font-size: 16px; font-weight: 700; line-height: 1.5; margin: 6px 0 24px; }
.marlett-footer-nav h2::after { content: ""; display: block; width: 28px; height: 2px; background: #ff7a1a; margin-top: 12px; }
.marlett-footer-nav ul { list-style: none; padding: 0; margin: 0; }
.marlett-footer-nav li { margin: 0 0 13px; padding: 0; }
.marlett-footer-social { display: flex; gap: 10px; margin-top: 22px; }
.marlett-footer-social a { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid #52627e; border-radius: 50%; color: #fff; }
.marlett-footer-social a:hover { background: #ff7a1a; color: #06265e; border-color: #ff7a1a; }
.marlett-footer-bottom { display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; border-top: 1px solid #314664; font-size: 12px; line-height: 1.8; }
.marlett-footer-bottom a { font-size: inherit; }
@media(max-width: 991px) { .marlett-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 36px; } }
@media(max-width: 575px) {
 .marlett-footer { padding-top: 40px; }
 .marlett-footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 20px; }
 .marlett-footer-contact { grid-column: 1 / -1; }
 .marlett-footer-nav h2 { margin-top: 0; margin-bottom: 18px; }
 .marlett-footer-bottom { flex-direction: column; gap: 4px; }
}

/* Urbanist for display and interface text; Inter for readable body copy. */
:root {
 --creote-family-one: "Urbanist", sans-serif !important;
 --creote-family-two: "Inter", sans-serif !important;
}
body, p, input, select, textarea { font-family: "Inter", sans-serif; }
h1, h2, h3, h4, h5, h6,
.header .navbar_nav a, .navigation_menu a,
.theme-btn, button, .btn, .marlett-footer-nav h2,
input[type="submit"], input[type="button"] {
 font-family: "Urbanist", sans-serif !important;
}

/* Interaction palette: orange primary actions, navy secondary actions,
   darker navy pressed/selected states, and visible keyboard focus. */
body :is(.theme-btn.one, .theme-btn.two, .theme-btn.three, .theme-btn.five, .theme_btn, .btn-primary, .application_button) {
 background: #ff7a1a !important; color: #06265e !important; border-color: #ff7a1a !important;
 transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body .theme-btn.three::before, body .theme-btn.three::after { background: transparent !important; }
body :is(.theme-btn.one, .theme-btn.two, .theme-btn.three, .theme-btn.five, .theme_btn, .btn-primary, .application_button):hover {
 background: #06265e !important; color: #fff !important; border-color: #06265e !important;
}
body :is(.track-btn, .sch_btn, .btn-dark, .btn-default) {
 background: #06265e !important; color: #fff !important; border-color: #06265e !important;
}
body :is(.track-btn, .sch_btn, .btn-dark, .btn-default):hover {
 background: #ff7a1a !important; color: #06265e !important; border-color: #ff7a1a !important;
}
body :is(.btn-outline-primary, .btn-outline-secondary) {
 background: transparent !important; color: #06265e !important; border-color: #06265e !important;
}
body :is(.btn-outline-primary, .btn-outline-secondary):hover {
 background: #fff3e9 !important; color: #06265e !important; border-color: #c34d00 !important;
}
body :is(.theme-btn.one, .theme-btn.two, .theme-btn.three, .theme-btn.five, .theme-btn, .theme_btn, .track-btn, .sch_btn, .btn, .application_button):is(:active, .active, [aria-pressed="true"]),
body .btn-check:checked + .btn {
 background: #041b43 !important; color: #fff !important; border-color: #041b43 !important;
 box-shadow: inset 0 -3px 0 #ff7a1a !important;
}
body :is(.s_tab_btn, .tabs_header a, .nav-pills .nav-link):hover {
 color: #06265e !important; background: #fff3e9 !important;
}
body :is(.s_tab_btn, .tabs_header a, .nav-pills .nav-link):is(.active, [aria-selected="true"]) {
 color: #fff !important; background: #06265e !important; border-color: #06265e !important;
 box-shadow: inset 0 -3px 0 #ff7a1a !important;
}
body :is(.theme-btn, .theme_btn, .track-btn, .sch_btn, .btn, .s_tab_btn, .application_button):focus-visible {
 outline: 3px solid #c34d00 !important; outline-offset: 3px !important;
 box-shadow: 0 0 0 2px #fff !important;
}
body :is(.theme-btn.one, .theme-btn.two, .theme-btn.three, .theme-btn.five, .theme-btn, .theme_btn, .track-btn, .sch_btn, .btn, .s_tab_btn):is(:disabled, .disabled, [aria-disabled="true"]) {
 background: #e4e7ee !important; color: #586174 !important; border-color: #c8d0db !important;
 box-shadow: none !important; opacity: 1; cursor: not-allowed;
}
body .navigation_menu .navbar_nav li > a.nav-link:is(:hover, :focus-visible),
body .navigation_menu .navbar_nav li.active > a.nav-link,
body .navigation_menu .navbar_nav li > a.nav-link[aria-current="page"] {
 color: #b74700 !important;
}
body .faqs_accordion .article-title:is(:hover, .active),
body .faqs_accordion .article-title:is(:hover, .active) .title_box {
 background: #06265e !important; color: #fff !important; border-color: #06265e !important;
}
@media (prefers-reduced-motion: reduce) {
 body :is(.theme-btn, .theme_btn, .track-btn, .sch_btn, .btn) { transition: none !important; }
}

/* Marlett UI system: one type scale, one control shape, clear action hierarchy. */
:root {
 --marlett-radius: 8px;
 --marlett-border: #d6deea;
 --marlett-text: #46546a;
 --marlett-muted: #66758b;
}
body { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.7; color: var(--marlett-text); -webkit-font-smoothing: antialiased; }
body p { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.75; }
body :is(h1,h2,h3,h4,h5,h6) { font-family: "Urbanist", sans-serif !important; font-weight: 700; line-height: 1.25; letter-spacing: -.02em; }
body h1 { font-size: clamp(34px,4vw,52px); }
body h2 { font-size: clamp(24px,2.5vw,32px); }
body h3 { font-size: 24px; }
body h4 { font-size: 20px; }
body :is(h5,h6) { font-size: 18px; }
body .title_sections .title { font-size: clamp(28px,3.2vw,42px) !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.025em; }
body .banner-section h2 { font-size: clamp(34px,4.5vw,58px) !important; line-height: 1.13 !important; letter-spacing: -.03em; font-weight: 800; }
body .page_header_default .page_header_content h1 { font-size: clamp(34px,4vw,52px) !important; line-height: 1.15 !important; }
body .title_sections .before_title { font-family: "Inter", sans-serif !important; font-size: 12px !important; font-weight: 600; line-height: 1.5; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; }
body .navigation_menu .nav-link { font-family: "Urbanist", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; letter-spacing: 0; }
body .navigation_menu .nav-link > span { color: inherit !important; }
body :is(.theme-btn.one,.theme-btn.two,.theme-btn.three,.theme-btn.five,.theme-btn,.theme_btn,.btn,.track-btn,.application_button,.s_tab_btn) {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 min-height: 48px; height: auto !important; min-width: 0 !important;
 padding: 12px 22px !important; line-height: 1.35 !important;
 border: 1px solid transparent; border-radius: var(--marlett-radius) !important;
 font-family: "Urbanist", sans-serif !important; font-size: 16px !important; font-weight: 700 !important;
 text-transform: none !important; letter-spacing: .01em !important;
 text-align: center; vertical-align: middle; white-space: normal; text-decoration: none;
 transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body :is(.theme-btn,.theme_btn,.btn,.track-btn):hover { border-radius: var(--marlett-radius) !important; }
body :is(.btn-outline-primary,.btn-outline-secondary) { border: 1px solid #a9b7ca !important; }
body :is(.btn-sm,.s_tab_btn) { min-height: 40px; padding: 9px 16px !important; font-size: 14px !important; }
body :is(.sch_btn,.btn.close) { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px !important; min-height: 42px; padding: 0 !important; border-radius: 8px !important; }
body .btn-close { border-radius: 6px; }
body .header_right_content .header-button { display: flex; align-items: center; gap: 8px; width: auto !important; min-width: 184px; }
body .header_right_content :is(.signup,.signin) { position: static !important; width: auto !important; min-width: 88px !important; min-height: 44px; padding: 10px 14px !important; font-size: 15px !important; border-radius: 8px !important; }
body .header_right_content .signin { background: #fff !important; color: #06265e !important; border: 1px solid #c3cede !important; }
body .header_right_content .signin:hover { background: #f2f5fa !important; border-color: #06265e !important; }
body .header_right_content .signin:active { background: #041b43 !important; color: #fff !important; }
body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=submit]):not([type=button]), select, textarea) {
 font-family: "Inter", sans-serif !important; font-size: 15px !important; line-height: 1.5;
 border: 1px solid var(--marlett-border); border-radius: 8px; color: #243650; background-color: #fff;
}
body :is(input.form-control,select.form-control,select.form-select) { min-height: 48px; padding: 12px 14px; }
body textarea.form-control { padding: 12px 14px; min-height: 140px; }
body :is(input,textarea)::placeholder { color: #748196; opacity: 1; }
body :is(input,select,textarea):focus-visible { border-color: #06265e; outline: 2px solid #ff7a1a !important; outline-offset: 2px; }
body :is(input[type=checkbox],input[type=radio]) { accent-color: #06265e; }
body label { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; }
body .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body .input-group-text { border-color: var(--marlett-border); background: #f2f5fa; color: #46546a; }
body .modal-content { border: none; border-radius: 12px; box-shadow: 0 20px 60px rgba(6,38,94,.18); }
body .modal-header, body .modal-footer { border-color: #e7ecf3; padding: 20px 24px; }
body .modal-body { padding: 24px; }
body .faqs_accordion .article-title { border-radius: 8px !important; font-family: "Urbanist",sans-serif; }
body .marlett-footer-nav h2 { font-size: 16px; letter-spacing: 0; line-height: 1.5; }
body .marlett-footer address, body .marlett-footer a { font-size: 14px; }
body .marlett-footer-bottom a { font-size: inherit; }
body .banner-section .mtop-search { border: none !important; border-radius: 12px; }
@media(max-width: 767px) {
 body p { font-size: 15px; line-height: 1.75; }
 body .theme-btn { max-width: 100%; }
 body .banner-section h2 { font-size: 36px !important; }
 body .modal-body, body .modal-header, body .modal-footer { padding: 18px; }
}
@media(prefers-reduced-motion: reduce) {
 body :is(.theme-btn,.theme_btn,.btn,.track-btn,.s_tab_btn) { transition: none !important; }
}

/* Remove legacy table padding and white navigation text in the light header. */
body .header .navigation_menu .navbar_nav > li > a.nav-link { color: #06265e !important; }
body .header .navigation_menu .navbar_nav > li.active > a.nav-link,
body .header .navigation_menu .navbar_nav > li > a.nav-link:hover { color: #b74700 !important; }
body .header .header_right_content ul.lup { padding: 0 !important; margin: 0 !important; }
body .header .header_right_content .header-button { display: flex !important; height: auto !important; padding: 0 !important; margin: 0 !important; }
@media(min-width: 992px) {
 body .header .header_right_content { width: 184px !important; padding-left: 20px !important; }
 body .header .navigation_menu .navbar_nav { display: flex; flex-wrap: nowrap; align-items: center; }
}

:root body .header.header_default.style_six.get_sticky_header .header_content_collapse .navigation_menu .navbar_nav > li > a.nav-link { color: #06265e !important; }
:root body .header.header_default.style_six.get_sticky_header .header_content_collapse .navigation_menu .navbar_nav > li.active > a.nav-link,
:root body .header.header_default.style_six.get_sticky_header .header_content_collapse .navigation_menu .navbar_nav > li > a.nav-link:hover { color: #b74700 !important; }
@media(min-width: 992px) {
 body .header .header_content_collapse { display: flex !important; align-items: center; gap: 24px; width: 100%; }
 body .header .header_menu_box { display: block !important; flex: 1; min-width: 0; }
 body .header .navigation_menu { display: flex; align-items: center; justify-content: flex-end; gap: 20px; }
 body .header .navigation_menu .navbar_nav { margin: 0 !important; padding: 0 !important; flex-shrink: 0; }
 body .header .header_right_content { display: block !important; padding: 0 !important; flex: 0 0 184px; }
 body:has(#sldseries) .header .top-search { display: none !important; }
 body .header .top-search { position: relative !important; flex: 1; min-width: 0; width: auto !important; }
}

@media(min-width: 992px) {
 body .header .navigation_menu .top-search { display: flex; align-items: center; gap: 6px; max-width: 280px; min-width: 190px; }
 body .header .top-search .searchbox { min-width: 0; width: 100% !important; height: 44px; padding: 10px 12px; margin: 0; }
 body .header .top-search .srch-btn { position: static !important; flex-shrink: 0; }
 body .header .top-search .track-btn { width: auto !important; min-height: 44px; padding: 10px 12px !important; font-size: 14px !important; }
}
body .banner-section .mtop-search { display: grid; grid-template-columns: minmax(0,1fr) 100px; gap: 12px; padding: 20px 24px; height: auto !important; position: absolute !important; }
body .banner-section .mtop-search .shplinks { position: static !important; grid-column: 1 / -1; }
body .banner-section .mtop-search .msearchbox { margin: 0 !important; width: 100% !important; min-width: 0; height: 48px !important; padding: 0 14px; border-radius: 8px !important; }
body .banner-section .mtop-search .msrch-btn { position: static !important; margin: 0 !important; max-width: none !important; }
body .banner-section .mtop-search .track-btn { width: 100% !important; height: 48px !important; line-height: 48px !important; margin: 0 !important; padding: 0 12px !important; border-radius: 8px !important; }
@media(max-width: 767px) {
 body .banner-section .mtop-search { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
}
body .banner-section .mtop-search .shplinks { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; }
body .banner-section .mtop-search .shplinks a {
 display: inline-flex; align-items: center; justify-content: center;
 margin: 0; padding: 6px 14px; min-height: 34px;
 background: rgba(255,255,255,.75); color: #06265e;
 border-radius: 7px; text-decoration: none;
 font-family: "Urbanist", sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2;
 box-shadow: none;
 transition: background-color .18s ease, color .18s ease;
}
body .banner-section .mtop-search .shplinks a:hover,
body .banner-section .mtop-search .shplinks a:focus-visible {
 background: #06265e; color: #fff;
}
body .banner-section .mtop-search .shplinks a:active { background: #041b43; color: #fff; }

body .header .top-search .track-btn { margin: 0 !important; }

/* Every form submit control follows the primary orange action, matching
   .theme-btn.one / .theme_btn / .btn-primary everywhere else on the site. */
body button[type="submit"],
body input[type="submit"] {
 display: inline-flex; align-items: center; justify-content: center; gap: 8px;
 min-height: 48px; height: auto !important; min-width: 0 !important;
 padding: 12px 22px !important; line-height: 1.35 !important;
 border: 1px solid transparent; border-radius: var(--marlett-radius) !important;
 font-family: "Urbanist", sans-serif !important; font-size: 16px !important; font-weight: 700 !important;
 text-transform: none !important; letter-spacing: .01em !important;
 text-align: center; vertical-align: middle; white-space: normal;
 background: #ff7a1a !important; color: #06265e !important; border-color: #ff7a1a !important;
 box-shadow: none !important;
 transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
body button[type="submit"]:hover,
body input[type="submit"]:hover {
 background: #06265e !important; color: #fff !important; border-color: #06265e !important;
}
body button[type="submit"]:is(:active, .active),
body input[type="submit"]:is(:active, .active) {
 background: #041b43 !important; color: #fff !important; border-color: #041b43 !important;
 box-shadow: inset 0 -3px 0 #ff7a1a !important;
}
body button[type="submit"]:focus-visible,
body input[type="submit"]:focus-visible {
 outline: 3px solid #c34d00 !important; outline-offset: 3px !important;
 box-shadow: 0 0 0 2px #fff !important;
}
body button[type="submit"]:is(:disabled, .disabled),
body input[type="submit"]:is(:disabled, .disabled) {
 background: #e4e7ee !important; color: #586174 !important; border-color: #c8d0db !important;
 box-shadow: none !important; opacity: 1; cursor: not-allowed;
}
/* The blog newsletter subscribe button is an absolutely-positioned, inline
   control attached to the email field; keep that layout but brand the colors,
   typography and shape. */
body .newsteller .item_scubscribe .mc4wp-form-fields input[type="submit"].nsltr,
body .newsteller .item_scubscribe .mc4wp-form-fields input.nsltr {
 position: absolute; top: 0; bottom: 0; right: 0; left: auto;
 width: auto; min-width: 104px; height: auto !important; min-height: 0 !important;
 margin: 0 !important; padding: 0 22px !important; line-height: 1 !important;
}
/* Bootstrap 5 dropped .btn-block; restore it for the full-width rate toggles. */
body .btn-block { display: block; width: 100%; }

/* Core Services carousel navigation arrows */
body .service_caro_section .swiper-button-prev,
body .service_caro_section .swiper-button-next {
 position: absolute; top: 45%; transform: translateY(-50%);
 z-index: 6; width: 44px; height: 44px; margin: 0 !important;
 display: flex; align-items: center; justify-content: center;
 background: #fff !important; border: 0; border-radius: 50%;
 box-shadow: 0 6px 18px rgba(6,38,94,.18); cursor: pointer;
 color: #06265e; font-size: 0; padding: 0;
 transition: background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
body .service_caro_section .swiper-button-prev { left: 6px; }
body .service_caro_section .swiper-button-next { right: 6px; }
body .service_caro_section .swiper-button-prev::before,
body .service_caro_section .swiper-button-next::before {
 position: static; width: 44px; height: 44px; line-height: 44px;
 text-align: center; font-size: 18px; color: #06265e;
 background: transparent; border: 0; box-shadow: none;
}
body .service_caro_section .swiper-button-prev:hover,
body .service_caro_section .swiper-button-next:hover {
 background: #06265e !important; box-shadow: 0 6px 18px rgba(6,38,94,.35);
}
body .service_caro_section .swiper-button-prev:hover::before,
body .service_caro_section .swiper-button-next:hover::before { color: #fff; }
body .service_caro_section .swiper-button-prev:active,
body .service_caro_section .swiper-button-next:active { background: #041b43 !important; }
body .service_caro_section .swiper-button-prev:focus-visible,
body .service_caro_section .swiper-button-next:focus-visible { outline: 3px solid #ff7a1a; outline-offset: 2px; }
@media(max-width: 767px) {
 body .service_caro_section .swiper-button-prev,
 body .service_caro_section .swiper-button-next { top: 38%; width: 38px; height: 38px; }
 body .service_caro_section .swiper-button-prev::before,
 body .service_caro_section .swiper-button-next::before { width: 38px; height: 38px; line-height: 38px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
 body .service_caro_section .swiper-button-prev,
 body .service_caro_section .swiper-button-next { transition: none !important; }
}
@media (prefers-reduced-motion: reduce) {
 body button[type="submit"], body input[type="submit"] { transition: none !important; }
}

/* Hero copy sits on a scrim, so it stays legible over any photo at any size. */
#sldseries { background-color: #041b43; background-position: center center; }

/* Match the trust image to the adjacent copy height on two-column layouts. */
@media (min-width: 1200px) {
 .marlett-trust-row { align-items: stretch; }
 .marlett-trust-row > div:last-child { display: flex; }
 .marlett-trust-row > div:last-child .image_boxes { position: relative; width: 100%; height: 100%; min-height: 0; margin: 0; }
 .marlett-trust-row > div:last-child .image_box { position: absolute; inset: 0; height: 100%; width: 100%; margin: 0; overflow: hidden; border-radius: 12px; }
 .marlett-trust-row img[src*="marlett-trusted-shipping"] { display: block; width: 100%; height: 100% !important; object-fit: cover; object-position: center 35%; }
}
@media (max-width: 1199px) {
 .marlett-trust-row img[src*="marlett-trusted-shipping"] { width: 100%; height: auto; max-height: 560px; object-fit: cover; object-position: center 35%; border-radius: 12px; }
}

/* Homepage journey cards replace the old rotating adjective strip. */
.marlett-journey { background: #f2f5fa; padding: 64px 0; border-bottom: 1px solid #e3e9f1; }
.marlett-journey-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 28px; }
.marlett-eyebrow { display: block; font: 600 11px/1.5 "Inter",sans-serif; color: #b74700; letter-spacing: .14em; margin-bottom: 10px; }
.marlett-journey-heading h2 { margin: 0; color: #06265e; font-size: clamp(28px,3vw,38px); letter-spacing: -.025em; }
.marlett-journey-heading > p { color: #66758b; max-width: 280px; margin: 0 0 3px; font-size: 14px; line-height: 1.7; }
.marlett-journey-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.marlett-journey-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid #e1e7f0; border-radius: 14px; background: #fff; box-shadow: 0 4px 16px rgba(6,38,94,.025); }
.marlett-journey-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.marlett-journey-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: #fff0e4; color: #b74700; }
.marlett-journey-number { font: 700 32px/1 "Urbanist",sans-serif; color: #b9c5d6; letter-spacing: -.02em; }
.marlett-journey-card h3 { color: #06265e; font-size: 23px; line-height: 1.25; margin: 0 0 12px; }
.marlett-journey-card p { color: #66758b; font-size: 14px; line-height: 1.75; margin: 0 0 26px; }
.marlett-journey-card > a { margin-top: auto; padding-top: 18px; border-top: 1px solid #e7ecf3; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 15px/1.5 "Urbanist",sans-serif; color: #06265e; text-decoration: none; }
.marlett-journey-card > a span { color: #b74700; font-size: 24px; line-height: 1; }
.marlett-journey-card > a:hover { color: #b74700; }
.marlett-journey-card:focus-within { border-color: #ff7a1a; }
@media(max-width: 767px) {
 .marlett-journey { padding: 40px 0; }
 .marlett-journey-heading { display: block; margin-bottom: 24px; }
 .marlett-journey-heading > p { margin-top: 12px; max-width: none; }
 .marlett-journey-grid { grid-template-columns: 1fr; gap: 16px; }
 .marlett-journey-card { padding: 24px; }
 .marlett-journey-card-top { margin-bottom: 18px; }
}

/* Responsive icon-led commitments: equal-width items on every screen. */
.marlett-promise-strip { background: #06265e; color: #fff; padding: 26px 0; }
.marlett-promise-items { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); align-items: stretch; padding: 0; margin: 0; list-style: none; }
.marlett-promise-item { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; margin: 0; min-width: 0; }
.marlett-promise-item + .marlett-promise-item { border-left: 1px solid rgba(255,255,255,.16); }
.marlett-promise-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: rgba(255,154,77,.1); color: #ff9a4d; }
.marlett-promise-icon svg { display: block; width: 27px; height: 27px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.marlett-promise-label { font: 600 18px/1.4 "Urbanist",sans-serif; letter-spacing: .01em; }
@media (max-width: 1023px) {
 .marlett-promise-strip { padding: 24px 0; }
 .marlett-promise-item { flex-direction: column; justify-content: flex-start; gap: 12px; text-align: center; padding: 0 16px; }
 .marlett-promise-label { font-size: 16px; max-width: 170px; }
}
@media (max-width: 575px) {
 .marlett-promise-strip { padding: 22px 0; }
 .marlett-promise-strip .auto-container { padding-left: 12px; padding-right: 12px; }
 .marlett-promise-item { padding: 0 8px; gap: 10px; }
 .marlett-promise-icon { width: 40px; height: 40px; flex-basis: 40px; border-radius: 10px; }
 .marlett-promise-icon svg { width: 23px; height: 23px; }
 .marlett-promise-label { font-size: 13px; line-height: 1.45; max-width: 110px; }
}

/* Preserve the full framing and logos of the generated service imagery. */
.service-section .service_carousel.style_one .image img[src*="service/marlett-"] {
 display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: contain; background: #f2f5fa;
}

/* The shared .image_boxes.style_three img rule is a fixed 470px tall box, which
   crops the sides off the 3:2 homepage banner. Drive the box from the image's
   own ratio instead so the whole frame is always visible. */
.image_boxes.style_three img[src*="bann."] ,
.image_boxes.style_three img[src*="bann-exact-logo"] {
 display: block; width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover;
}

/* ------------------------------------------------------------------
   Homepage hero: full-bleed 4-slide Swiper with a legibility scrim.
   --------------------------------------------------------------- */
.marlett-hero { position: relative; isolation: isolate; --marlett-hero-h: clamp(520px, 74vh, 780px); }
.marlett-hero-slider {
 position: relative; width: 100%; min-height: var(--marlett-hero-h); overflow: hidden;
 display: flex; flex-direction: column;
}
/* Swiper's wrapper is height:auto, so a min-height on the container alone leaves
   the slides collapsed to content height. Let the wrapper grow, and floor the
   slides themselves so the media and scrim always cover the full hero. */
.marlett-hero-slider > .swiper-wrapper { flex: 1 1 auto; }

.marlett-hero-slide {
 position: relative; display: flex; flex-direction: column; justify-content: center;
 min-height: var(--marlett-hero-h);
}

/* Media fills the slide; ratios differ per slide (3:2 and 16:9) so cover crops gently. */
.marlett-hero-media { position: absolute; inset: 0; z-index: 0; display: block; }
.marlett-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

/* Scrim: strong on the left where the copy sits, clearing to the right. */
.marlett-hero-scrim {
 position: absolute; inset: 0; z-index: 1; display: block;
 background:
  linear-gradient(100deg, rgba(4,27,67,.95) 0%, rgba(4,27,67,.9) 30%, rgba(4,27,67,.62) 56%, rgba(4,27,67,.2) 82%, rgba(4,27,67,.1) 100%),
  linear-gradient(to top, rgba(4,27,67,.6) 0%, rgba(4,27,67,0) 42%);
}

.marlett-hero-body { position: relative; z-index: 2; width: 100%; }
.marlett-hero-copy { max-width: 660px; }

.marlett-hero-eyebrow {
 display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px;
 font-family: "Urbanist", sans-serif !important; font-size: 13px; font-weight: 700;
 line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: #ff7a1a;
}
.marlett-hero-eyebrow::before { content: ""; width: 34px; height: 2px; background: #ff7a1a; border-radius: 2px; }

body .marlett-hero .marlett-hero-title {
 font-family: "Urbanist", sans-serif !important; font-weight: 800; color: #fff;
 font-size: clamp(30px, 4.2vw, 58px) !important; line-height: 1.1 !important;
 letter-spacing: -.03em; margin: 0 0 18px; text-wrap: balance;
}
.marlett-hero-sub {
 margin: 0 0 30px; max-width: 54ch; color: rgba(255,255,255,.9);
 font-family: "Inter", sans-serif; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.65;
}
.marlett-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
body .marlett-hero .theme-btn.one { padding: 15px 30px; font-size: 16px; }

.marlett-hero-link {
 display: inline-flex; align-items: center; padding: 14px 28px; border-radius: 8px;
 border: 1px solid rgba(255,255,255,.5); color: #fff; background: rgba(255,255,255,.08);
 font-family: "Urbanist", sans-serif; font-size: 16px; font-weight: 700; line-height: 1.2;
 text-decoration: none; transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.marlett-hero-link:hover, .marlett-hero-link:focus-visible { background: #fff; border-color: #fff; color: #06265e; }

/* Slider controls, scoped so the other Swiper carousels keep the theme styling. */
.marlett-hero-slider .swiper-pagination {
 bottom: 100px; left: 0; right: 0; width: 100%; height: auto;
 display: flex; align-items: center; justify-content: center; gap: 10px;
}
.marlett-hero-slider .swiper-pagination-bullet {
 width: 34px; height: 4px; margin: 0 !important; border-radius: 99px; opacity: 1;
 background: rgba(255,255,255,.42); transition: width .3s ease, background-color .3s ease;
}
.marlett-hero-slider .swiper-pagination-bullet-active { width: 54px; background: #ff7a1a; }

.marlett-hero-slider .swiper-button-prev,
.marlett-hero-slider .swiper-button-next {
 top: 50%; margin-top: -26px; width: 52px; height: 52px; border-radius: 50%;
 background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.34);
 color: #fff; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
 transition: background-color .18s ease, border-color .18s ease;
}
.marlett-hero-slider .swiper-button-prev::after,
.marlett-hero-slider .swiper-button-next::after { font-size: 22px; font-weight: 700; }
.marlett-hero-slider .swiper-button-prev::after { content: "\2039"; }
.marlett-hero-slider .swiper-button-next::after { content: "\203A"; }
.marlett-hero-slider .swiper-button-prev:hover,
.marlett-hero-slider .swiper-button-next:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.6); }
.marlett-hero-slider .swiper-button-disabled { opacity: .3; }

/* Tracking panel, pulled up over the foot of the hero.
   Reproduces the original theme panel (.banner-section .mtop-search): links at
   the top, input centred at 90%, full-width Track button underneath, sized to
   the original 84% width. The only change is an opaque white background in
   place of the translucent trans_grey.png texture. */
.marlett-hero-searchwrap { position: relative; z-index: 6; margin-top: -60px; }
.marlett-hero-search {
 position: relative; display: flex; flex-direction: column; gap: 10px;
 width: 100%; max-width: 440px; margin: 0 auto;
 padding: 16px 0 14px; border-radius: 10px; background: #fff;
 box-shadow: 0 24px 60px rgba(4,27,67,.26);
}
.marlett-hero-search .shplinks {
 display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-left: 5%;
 font-family: "Inter", sans-serif; font-size: 14px; font-weight: 600;
}
.marlett-hero-search .shplinks a { color: #06265e; text-decoration: none; transition: color .18s ease; }
.marlett-hero-search .shplinks a:hover, .marlett-hero-search .shplinks a:focus-visible { color: #ff7a1a; }

body .marlett-hero-search .msearchbox {
 display: block; width: 90%; min-width: 0; height: 46px !important; margin: 0 auto;
 padding: 0 16px !important; border: 1px solid #d6deea; border-radius: 9px;
 background: #f2f5fa; color: #243650; font-family: "Inter", sans-serif; font-size: 15px;
}
.marlett-hero-search .msearchbox:focus { outline: 2px solid #ff7a1a; outline-offset: 1px; background: #fff; }
/* The theme absolutely positions .msrch-btn over the input and reserves 100px
   of input padding for it. Here the button is a normal full-width row instead. */
body .marlett-hero-search .msrch-btn {
 position: static !important; inset: auto !important; float: none !important;
 display: block !important; width: auto !important; max-width: none !important;
 min-width: 0 !important; height: auto !important; margin: 0 15px !important;
}
/* Also beats the theme's min-height:48px floor and its negative top margin
   (margin:-20px 0 0), which otherwise pulls the button up over the field. */
body .marlett-hero .marlett-hero-search .msrch-btn .track-btn {
 position: static !important; float: none !important; margin: 0 !important;
 display: flex !important; align-items: center; justify-content: center; gap: 8px;
 width: 100% !important; min-width: 0 !important; max-width: none !important;
 height: 48px !important; min-height: 48px !important; max-height: none !important;
 line-height: 1 !important; padding: 0 22px !important; box-sizing: border-box !important;
 border-radius: 9px; font-size: 15px; font-weight: 700; text-decoration: none;
}
.marlett-hero { padding-bottom: 72px; }

@media (max-width: 991px) {
 .marlett-hero { --marlett-hero-h: clamp(500px, 66vh, 640px); }
 .marlett-hero-scrim {
  background:
   linear-gradient(to top, rgba(4,27,67,.96) 0%, rgba(4,27,67,.88) 38%, rgba(4,27,67,.5) 66%, rgba(4,27,67,.28) 100%);
 }
 .marlett-hero-copy { max-width: 100%; }
 .marlett-hero-slider .swiper-button-prev, .marlett-hero-slider .swiper-button-next { display: none; }
 .marlett-hero-slider .swiper-pagination { bottom: 118px; }
}

@media (max-width: 767px) {
 .marlett-hero { --marlett-hero-h: 500px; }
body .marlett-hero .marlett-hero-title { font-size: 30px !important; }
.marlett-hero-sub { font-size: 15px; margin-bottom: 24px; }
.marlett-hero-actions { gap: 10px; }
body .marlett-hero .theme-btn.one, .marlett-hero-link { padding: 13px 22px; font-size: 15px; }
 .marlett-hero-searchwrap { margin-top: -48px; }
 .marlett-hero-search { width: 94%; max-width: 100%; gap: 8px; padding: 14px 0 12px; }
 .marlett-hero-search .shplinks { padding-left: 0; justify-content: center; }
 body .marlett-hero-search .msearchbox { width: 92%; }
 body .marlett-hero-search .msrch-btn { margin: 0 10px !important; }
 .marlett-hero { padding-bottom: 56px; }
}

/* Inner-page tracking widget: .page_header_default .mtop-search, shown above the
   page title on every page except the homepage (which uses .marlett-hero-search
   above). Up to 768px the theme makes this display:block, absolutely positions
   .msrch-btn at top:13px/right:1px, and gives .track-btn a margin-top:-20px, so
   the Track button rides 11px above the field's top edge and stands 4px taller
   than the input. The field is also full-bleed while every other element on the
   page respects the container gutter. Lay the pair out as a grid instead: the
   button becomes a real second column, vertically centred on the field, sized to
   the same 44px row, and the whole widget picks up the container gutters. */
@media (max-width: 768px) {
  body .page_header_default .mtop-search.trksrch {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 8px; box-sizing: border-box;
    left: 0; right: 0; width: auto; max-width: none; margin: 0 auto;
    padding: 5px 30px 0;
  }
  body .page_header_default .mtop-search .msearchbox {
    width: 100% !important; min-width: 0; height: 44px !important;
    margin: 0 !important; padding: 0 14px !important;
  }
  body .page_header_default .mtop-search .msrch-btn {
    position: static !important; inset: auto !important; float: none !important;
    display: block !important; width: auto !important; max-width: none !important;
    min-width: 0 !important; height: auto !important; margin: 0 !important;
  }
  body .page_header_default .mtop-search .track-btn {
    position: static !important; float: none !important; margin: 0 !important;
    display: flex !important; align-items: center; justify-content: center; gap: 6px;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    height: 44px !important; min-height: 44px !important; max-height: none !important;
    line-height: 1 !important; padding: 0 18px !important; box-sizing: border-box !important;
    border-radius: 9px; font-size: 13px !important; font-weight: 700;
    white-space: nowrap; text-decoration: none;
  }
}

/* Mobile-menu tracking field: the theme overlays a 41px .sch_btn on the right of
   .search but leaves only 15px of input padding, so anything wider than ~15px
   slides underneath the button. Reserve the button's real width. */
@media (max-width: 768px) {
  body .crt_mobile_menu .trksrch .search { padding-right: 56px !important; }
}

/* Container Shipping page: spacing for the added option sections.
   The cards themselves reuse the existing .marlett-journey-* components. */
.mcs-add { padding: 66px 0; background: #fff; }
.mcs-add-alt { padding: 66px 0; background: #f4f6fa; }
.mcs-add .marlett-journey-heading,
.mcs-add-alt .marlett-journey-heading { margin-bottom: 30px; }
@media (max-width: 991px) {
  .mcs-add, .mcs-add-alt { padding: 48px 0; }
}

/* RoRo Shipping page: full-width carrier image band between the two card sections. */
.mcs-carrier-band { padding: 0 0 66px; background: #fff; }
.mcs-carrier-band .auto-container { max-width: 1000px; }
.mcs-carrier-band img { width: 100%; height: auto; object-fit: cover; }
@media (max-width: 991px) {
  .mcs-carrier-band { padding: 0 0 48px; }
}

/* Transportation page: centred closing block under the card sections. */
.mcs-planning { max-width: 780px; margin: 0 auto; text-align: center; }
.mcs-planning p { color: #4a5a75; font-size: 17px; line-height: 1.75; margin: 0 0 16px; }
.mcs-planning .theme_btn_all { margin-top: 12px; }

}


/* ------------------------------------------------------------
   Homepage mobile refinements.

   Split section ("...peace of mind every step of the way.")
   The photo column is an empty element carrying only a background
   image. In the side-by-side desktop layout the flex row stretches
   it to the text column's height; once the columns stack it has no
   content and collapses to 0, so the photo disappears.

   parcel-inspection.png is 1024x1536 (portrait, ratio 0.67). A fixed
   min-height on a full-width phone box crops most of it away, so the
   box is sized with aspect-ratio instead - close to the image's own
   shape - which keeps nearly the whole photo visible.

   "Ship, Send, & Receive With Confidence" band
   The .pd_top_* spacers are padding-top utilities, and the markup
   stacks three of them (80 + 120 + 40 = 240px) before the heading
   is reached. On a phone that is mostly empty space.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
  /* --- split section --- */
  body .mcs-split-fix .subtitle {
    font-size: 20px !important;
    line-height: 1.45 !important;
  }
  body .mcs-split-fix p { font-size: 15px !important; line-height: 1.7 !important; }
  body .mcs-split-fix .pd_top_60 { padding-top: 30px !important; }
  body .mcs-split-fix .pd_bottom_70 { padding-bottom: 34px !important; }
  body .mcs-split-fix .pd_bottom_60 { padding-bottom: 30px !important; }
  body .mcs-split-fix .row.align-items-center img { margin-bottom: 16px; }

  /* --- Ship, Send & Receive band --- */
}

/* The split-section photo is a background layer on an empty column. Box it to
   the same shape as marlett-customer-service-team.webp (1122x1402, ratio 0.8)
   so both images read as the same size and proportion at every screen width. */
body .mcs-split-fix .mcs-split-media {
  aspect-ratio: 1122 / 1402;
  background-size: cover !important;
  background-position: center 30% !important;
}
@media (max-width: 767px) {
  body .mcs-split-fix .mcs-split-media {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

/* Split-section photo: match the framing of the reference image
   (marlett-customer-service-team.webp). That one sits inside a padded
   .container in a 10px-rounded .image_box; this one was in a full-bleed
   container-fluid with 30px radius on the right corners only, which is why
   it read as a different size and shape. Give it the same gutters and the
   same even corner radius. */
body .mcs-split-fix .container-fluid {
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 576px) {
  body .mcs-split-fix .container-fluid { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1200px) {
  body .mcs-split-fix .container-fluid { padding-left: 32px; padding-right: 32px; }
}
body .mcs-split-fix .mcs-split-media {
  border-radius: 10px !important;
}
@media (max-width: 767px) {
  body .mcs-split-fix .mcs-split-media { border-radius: 10px !important; }
}

/* About-section photo (marlett-customer-service-team.webp).
   It sits in a generic .image_box, which picks up a fixed height from the
   theme, and the .object-fit-cover class on the <img> does not exist in any
   stylesheet - so the 1122x1402 image was being forced into a box of a
   different ratio and read as stretched. Let it keep its own proportions,
   and give it the same left/right breathing room as the split-section photo. */
body .mcs-trust-media .image_box {
  height: auto !important;
  border-radius: 10px;
  overflow: hidden;
}
body .mcs-trust-media .image_box img[src*="marlett-customer-service-team"] {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
body .mcs-trust-media { padding-left: 16px; padding-right: 16px; }
@media (min-width: 576px) {
  body .mcs-trust-media { padding-left: 24px; padding-right: 24px; }
}
@media (min-width: 1200px) {
  body .mcs-trust-media { padding-left: 32px; padding-right: 32px; }
}

}
/* ===================================================================
   Ocean Cargo page - standalone redesign
   Scoped to .ocean-page so nothing else on the site is affected.
   =================================================================== */
.ocean-page {
  --oc-navy: #041b43;
  --oc-blue: #06265e;
  --oc-orange: #ff7a1a;
}

/* hero */
.ocean-page .oc-hero {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  background: #041b43 url("assets/images/service/marlett-ocean-port-hero.jpg") center/cover no-repeat;
  isolation: isolate;
}
.ocean-page .oc-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(4,27,67,.96) 0%, rgba(4,27,67,.9) 42%, rgba(4,27,67,.5) 100%);
}
.ocean-page .oc-hero-inner { max-width: 700px; padding: 84px 0; }
.ocean-page .oc-eyebrow {
  display: inline-block;
  font-size: 13px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: #ff7a1a; margin-bottom: 14px;
}
.ocean-page .oc-hero h1 {
  color: #fff; font-size: 50px; line-height: 1.1; font-weight: 800; margin: 0 0 20px;
}
.ocean-page .oc-hero p { color: #d7e0f2; font-size: 18px; line-height: 1.7; margin: 0 0 30px; }
.ocean-page .oc-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.ocean-page .oc-btn {
  display: inline-block; padding: 13px 28px; border-radius: 4px;
  font-weight: 700; font-size: 15px; transition: all .18s ease;
}
.ocean-page .oc-btn-primary { background: #ff7a1a; color: #fff; }
.ocean-page .oc-btn-primary:hover { background: #e96a10; color: #fff; }
.ocean-page .oc-btn-ghost { border: 2px solid rgba(255,255,255,.65); color: #fff; }
.ocean-page .oc-btn-ghost:hover { background: #fff; color: #041b43; }

/* intro */
.ocean-page .oc-intro { padding: 72px 0; background: #fff; }
.ocean-page .oc-intro-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.ocean-page .oc-intro p { font-size: 19px; line-height: 1.75; color: #1d2b47; margin: 0 0 16px; }
.ocean-page .oc-intro p + p { color: #4a5a75; font-size: 17px; margin-bottom: 0; }

/* section head */
.ocean-page .oc-head { text-align: center; max-width: 740px; margin: 0 auto 44px; }
.ocean-page .oc-head .oc-eyebrow { color: #06265e; }
.ocean-page .oc-head h2 { font-size: 34px; font-weight: 800; color: #041b43; margin: 0 0 12px; }
.ocean-page .oc-head p { color: #5b6b88; margin: 0; font-size: 17px; }

/* cards */
.ocean-page .oc-cards { padding: 72px 0; background: #f4f6fa; }
.ocean-page .oc-card {
  background: #fff; border: 1px solid #e2e7f0; border-radius: 10px; height: 100%;
  padding: 30px 26px 26px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ocean-page .oc-card:hover {
  transform: translateY(-4px); box-shadow: 0 14px 34px rgba(4,27,67,.12); border-color: #c9d5ea;
}
.ocean-page .oc-card-num {
  font: 800 15px/1 "Urbanist", sans-serif; color: #b74700;
  letter-spacing: .06em; margin-bottom: 14px;
}
.ocean-page .oc-card h3 { font-size: 21px; font-weight: 800; color: #06265e; margin: 0 0 10px; }
.ocean-page .oc-card p { color: #5b6b88; margin: 0 0 18px; font-size: 15px; line-height: 1.7; }
.ocean-page .oc-card a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  color: #06265e; text-decoration: none;
}
.ocean-page .oc-card a:hover { color: #ff7a1a; }
.ocean-page .oc-card a span { color: #b74700; font-size: 18px; line-height: 1; }

/* routes band */
.ocean-page .oc-routes { background: #041b43; color: #fff; padding: 72px 0; }
.ocean-page .oc-routes h2 { color: #fff; font-size: 32px; font-weight: 800; margin: 0 0 12px; }
.ocean-page .oc-routes .oc-head p { color: #b8c6de; }
.ocean-page .oc-route-grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center;
}
.ocean-page .oc-route {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 26px 24px; text-align: center;
}
.ocean-page .oc-route strong {
  display: block; font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 6px;
}
.ocean-page .oc-route span {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #93a8ce;
}
.ocean-page .oc-route-arrow { font-size: 30px; color: #ff7a1a; }
.ocean-page .oc-routes-note { margin-top: 26px; text-align: center; color: #b8c6de; font-size: 15px; }

/* cta */
.ocean-page .oc-cta { background: #fff; padding: 72px 0; text-align: center; }
.ocean-page .oc-cta h2 { font-size: 32px; font-weight: 800; color: #041b43; margin: 0 0 14px; }
.ocean-page .oc-cta p { color: #5b6b88; max-width: 620px; margin: 0 auto 26px; font-size: 17px; }

/* responsive */
@media (max-width: 991px) {
  .ocean-page .oc-hero { min-height: 460px; }
  .ocean-page .oc-hero h1 { font-size: 38px; }
  .ocean-page .oc-hero-inner { padding: 62px 0; }
  .ocean-page .oc-route-grid { grid-template-columns: 1fr; gap: 14px; }
  .ocean-page .oc-route-arrow { transform: rotate(90deg); justify-self: center; }
  .ocean-page .oc-intro,
  .ocean-page .oc-cards,
  .ocean-page .oc-routes,
  .ocean-page .oc-cta { padding: 52px 0; }
}
@media (max-width: 575px) {
  .ocean-page .oc-hero { min-height: 400px; }
  .ocean-page .oc-hero h1 { font-size: 31px; }
  .ocean-page .oc-hero p { font-size: 16px; }
  .ocean-page .oc-btn { width: 100%; text-align: center; }
  .ocean-page .oc-intro p { font-size: 17px; }
  .ocean-page .oc-head h2,
  .ocean-page .oc-routes h2,
  .ocean-page .oc-cta h2 { font-size: 26px; }
}