/* * Contact page (post 18823) — "Our Branches" layout, matched to the reference. * Scoped to .elementor-18823 so nothing here affects another page. * * Reference dimensions (measured): map 609×267, ~41px gap between map and the * details column, ~65px between branches, greyscale/muted map tiles. * * Branch rows (map | details), one pair per branch: * Johannesburg row 0d633b5 : map b4d77ca | details 49c78f4 * Cape Town row 7ec8715 : map 4a39202 | details 2bd2c93 * Durban row 09b6496 : map 5bba0b6 | details fada067 */ @media ( min-width: 768px ) { /* Widen each branch row and open a clear gap between the map and the * details; space the branches apart, with extra room after the last. */ .elementor-18823 .elementor-element-0d633b5, .elementor-18823 .elementor-element-7ec8715, .elementor-18823 .elementor-element-09b6496 { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; gap: 40px !important; align-items: flex-start !important; /* both columns top-aligned */ margin-bottom: 56px !important; } /* Branch details typography — compressed to the reference (16px / ~1.3 * line-height) so the text block height ≈ the map height and both align. * Scoped to the three branch rows so nothing else on the page changes. */ .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor, .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor *, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor *, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor * { line-height: 1.3 !important; } /* Branch heading (JOHANNESBURG etc.) — tight leading, small gap below. */ .elementor-18823 .elementor-element-0d633b5 h1, .elementor-18823 .elementor-element-0d633b5 h2, .elementor-18823 .elementor-element-0d633b5 h3, .elementor-18823 .elementor-element-0d633b5 h4, .elementor-18823 .elementor-element-7ec8715 h1, .elementor-18823 .elementor-element-7ec8715 h2, .elementor-18823 .elementor-element-7ec8715 h3, .elementor-18823 .elementor-element-7ec8715 h4, .elementor-18823 .elementor-element-09b6496 h1, .elementor-18823 .elementor-element-09b6496 h2, .elementor-18823 .elementor-element-09b6496 h3, .elementor-18823 .elementor-element-09b6496 h4 { line-height: 1.2 !important; margin-bottom: 2px !important; /* heading sits close to the hours, per reference */ } /* Remove the widgets' own padding and set a single consistent gap between the * hours / contact groups, so the details block height matches the map. */ .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor .elementor-widget-container, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor .elementor-widget-container, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor .elementor-widget-container { padding: 0 !important; } /* A gap between paragraph groups — the email/phones and the address sit in * separate

on Cape Town / Durban, so give each

a bottom gap (the last * one none). Johannesburg uses one

with a blank line, which is unaffected. */ .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor p, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor p, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor p { margin: 0 0 18px 0 !important; } .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor p:last-child, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor p:last-child, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor p:last-child { margin-bottom: 0 !important; } .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor { margin-bottom: 18px !important; } .elementor-18823 .elementor-element-0d633b5 .elementor-widget-text-editor:last-child, .elementor-18823 .elementor-element-7ec8715 .elementor-widget-text-editor:last-child, .elementor-18823 .elementor-element-09b6496 .elementor-widget-text-editor:last-child { margin-bottom: 0 !important; } /* Breathing room after the last branch, before "Get In Touch". */ .elementor-18823 .elementor-element-09b6496 { margin-bottom: 96px !important; } /* Map columns — wide, on the left. */ .elementor-18823 .elementor-element-b4d77ca, .elementor-18823 .elementor-element-4a39202, .elementor-18823 .elementor-element-5bba0b6 { flex: 0 0 66% !important; max-width: 66% !important; order: 0 !important; } /* Details columns — narrower, on the right. */ .elementor-18823 .elementor-element-49c78f4, .elementor-18823 .elementor-element-2bd2c93, .elementor-18823 .elementor-element-fada067 { flex: 0 0 31% !important; max-width: 31% !important; order: 1 !important; } /* Only the opening HOURS are not bold (the reference uses a light face); the * email, phones and address stay bold navy per the CI. Hours widgets, per * branch: JHB 27c22f7, CPT a5d764d, DBN defe54c. */ .elementor-18823 .elementor-element-27c22f7, .elementor-18823 .elementor-element-a5d764d, .elementor-18823 .elementor-element-defe54c, .elementor-18823 .elementor-element-27c22f7 *, .elementor-18823 .elementor-element-a5d764d *, .elementor-18823 .elementor-element-defe54c * { font-weight: 300 !important; /* Avenir 35-Light — the un-bold hours */ } } /* Map is a fixed landscape block like the reference (~2.2:1). */ .elementor-18823 .elementor-widget-google_maps iframe, .elementor-18823 .elementor-widget-google_maps .elementor-custom-embed { height: 275px !important; min-height: 0 !important; } @media ( max-width: 767px ) { .elementor-18823 .elementor-widget-google_maps iframe, .elementor-18823 .elementor-widget-google_maps .elementor-custom-embed { height: 260px !important; } /* Each branch "details" column (Elementor atomic flexbox) carried a stray ~8px left margin on mobile, shifting the whole page right and adding a sideways scroll. Zero the horizontal margin and cap the width so the columns sit flush inside the screen. */ .elementor-18823 .elementor-element-49c78f4, .elementor-18823 .elementor-element-2bd2c93, .elementor-18823 .elementor-element-fada067 { margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; } } /* No border (the Elementor widget adds a 1px grey border). */ .elementor-18823 .elementor-widget-google_maps, .elementor-18823 .elementor-widget-google_maps .elementor-custom-embed, .elementor-18823 .elementor-widget-google_maps iframe { border: 0 !important; box-shadow: none !important; } /* The custom styled Google map (contact-maps.js) renders into this div, filling * the map slot. It carries the reference's silver style natively, so no colour * filter is used. */ .elementor-18823 .elementor-widget-google_maps .elementor-custom-embed { position: relative; } .elementor-18823 .elementor-widget-google_maps .adr-gmap { position: absolute; inset: 0; width: 100%; height: 100%; } /* ------------------------------------------------------------------ * * Customer Service — the reference shows only the WhatsApp icon, not the * number. Hide the paragraph that holds the WhatsApp number link (the icon is * a separate widget and stays). * ------------------------------------------------------------------ */ .elementor-18823 .elementor-element-a7edaf1 p:has( a[href*="api.whatsapp.com"] ) { display: none !important; } /* ------------------------------------------------------------------ * * "Get In Touch" form — match the reference typography. * Labels: Roboto 14px, regular, grey #5b616f. * Submit: Oswald 22px, navy, white, 2px grey border, square. * ------------------------------------------------------------------ */ .elementor-18823 .forminator-ui .forminator-label { font-family: "Avenir", "Roboto", Arial, sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: #5b616f !important; letter-spacing: normal !important; text-transform: none !important; } /* Forminator applies button styles via an ID selector (#forminator-module-NNNN * .forminator-button) with !important, so match it with an ID + an extra class * to win. Module id 18835 on this install (the form's post id). */ .elementor-18823 #forminator-module-18835 .forminator-button-submit, .elementor-18823 #forminator-module-18835 button.forminator-button, #forminator-module-18835 .forminator-button-submit.forminator-button { font-family: "Oswald", sans-serif !important; font-size: 22px !important; font-weight: 500 !important; background-color: #242c3f !important; background-image: none !important; color: #ffffff !important; border: 2px solid #5b616f !important; border-radius: 0 !important; text-transform: none !important; } /* "Email Us Now" hero button — Oswald, and more horizontal padding so there is * clear whitespace either side of the label (wider, like the reference). */ .elementor-18823 .elementor-element-d81a02d, .elementor-18823 .elementor-element-d81a02d * { font-family: "Oswald", sans-serif !important; font-weight: 500 !important; } .elementor-18823 .elementor-element-d81a02d .elementor-slide-button, .elementor-18823 .elementor-element-d81a02d .elementor-button { padding-left: 52px !important; padding-right: 52px !important; } /* ------------------------------------------------------------------ * * Hero subtitle + WhatsApp Support text — match the reference (Avenir). * The slide description was rendering in a serif fallback (Times). * ------------------------------------------------------------------ */ .elementor-18823 .elementor-slide-description, .elementor-18823 .elementor-slide-description * { font-family: "Avenir", "Roboto", Arial, sans-serif !important; font-size: 20px !important; line-height: 1.3 !important; color: #ffffff !important; } /* WHATSAPP SUPPORT LINE heading — Avenir heavy, 18px, navy (not Oswald). */ .elementor-18823 .elementor-element-a7edaf1 h1, .elementor-18823 .elementor-element-a7edaf1 h2, .elementor-18823 .elementor-element-a7edaf1 h3, .elementor-18823 .elementor-element-a7edaf1 h4 { font-family: "Avenir", "Roboto", Arial, sans-serif !important; font-weight: 700 !important; font-size: 18px !important; line-height: 1.7 !important; color: #242c3f !important; text-transform: none !important; } /* Description — Avenir 35-Light, 18px, navy; keep the emphasised phrases bold. */ .elementor-18823 .elementor-element-a7edaf1 p { font-family: "Avenir", "Roboto", Arial, sans-serif !important; font-weight: 300 !important; font-size: 18px !important; line-height: 1.7 !important; color: #242c3f !important; } .elementor-18823 .elementor-element-a7edaf1 p strong { font-weight: 700 !important; }