.elementor-kit-6{--e-global-color-primary:#009CDE;--e-global-color-secondary:#00C7EE;--e-global-color-text:#000000;--e-global-color-accent:#CEFF00;--e-global-typography-primary-font-family:"halyard-display";--e-global-typography-primary-font-size:108px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"halyard-display";--e-global-typography-secondary-font-weight:500;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-weight:300;--e-global-typography-accent-font-family:"halyard-display";--e-global-typography-accent-font-weight:700;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ============================================================ MULTITECH SERVICES — Elementor Site Init CSS Generated: March 2026 Paste into: WordPress → Elementor → Site Settings → Custom CSS ============================================================ */ /* ─── FONT IMPORT ────────────────────────────────────────────── Halyard Display is a commercial font (Klim Type Foundry). If served via Adobe Fonts, add the kit ID to Elementor → Site Settings → Custom Code → . If you have a Google Fonts alternative, replace below. Open Sans is Google Fonts — imported here. ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); /* ─── NOTE on Halyard Display ─────────────────────────────────── Halyard Display is NOT on Google Fonts. If loaded via Adobe Fonts, ensure the kit is active. The --font-heading variable below uses it with a safe fallback stack. ─────────────────────────────────────────────────────────── */ /* ============================================================ 1. CSS VARIABLES (Design Tokens) ============================================================ */ :root { /* ── Colours ── */ --color-primary: #009CDE; /* Main blue — buttons, accents, links */ --color-secondary: #00C7EE; /* Lighter blue — highlights, hover states */ --color-accent: #CEFF00; /* Lime yellow — CTA buttons, highlights */ --color-dark: #0D1B2E; /* Deep navy — hero bg, dark sections */ --color-dark-mid: #1a2e45; /* Mid navy — card backgrounds in dark sections */ --color-text: #1a1a1a; /* Body text (near-black, slightly warmer than #000) */ --color-text-muted: #5a6a7a; /* Secondary text, meta info */ --color-text-light: #ffffff; /* Text on dark backgrounds */ --color-headline: #0D1B2E; /* Default heading colour on white bg */ --color-border: #e0e8f0; /* Dividers, input borders */ --color-white: #ffffff; --color-bg-light: #f4f8fc; /* Light blue-grey page sections */ --color-input-bg: #1e2d42; /* Form input background (dark hero form) */ --color-card-border: #CEFF00; /* Lime border on hero form card */ /* ── Typography ── */ --font-heading: 'halyard-display', 'Open Sans', Arial, sans-serif; --font-body: 'Open Sans', Arial, Helvetica, sans-serif; /* ── Font Sizes — Desktop (fluid with clamp) ── */ --fs-h1: clamp(2.8rem, 5.5vw, 5rem); /* Hero headline — large & bold */ --fs-h2: clamp(2rem, 3.5vw, 3rem); --fs-h3: clamp(1.5rem, 2.5vw, 2.2rem); --fs-h4: clamp(1.25rem, 2vw, 1.6rem); --fs-h5: 1.2rem; --fs-h6: 1rem; --fs-body: 1rem; --fs-sm: 0.875rem; --fs-lg: 1.125rem; /* ── Spacing ── */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 6rem; --space-2xl: 8rem; /* ── Layout ── */ --container-max: 1200px; --container-wide: 1400px; --container-narrow: 860px; --gutter: 1.5rem; /* ── Borders & Radius ── */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --border-width: 2px; /* ── Shadows ── */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12); --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.18); --shadow-blue: 0 4px 20px rgba(0, 156, 222, 0.25); /* ── Transitions ── */ --transition: 0.25s ease; --transition-slow: 0.4s ease; } /* ============================================================ 2. BASE RESET & BODY ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; color: var(--color-text); background-color: var(--color-white); line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, video { max-width: 100%; height: auto; display: block; } a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-secondary); } /* ============================================================ 3. TYPOGRAPHY — Desktop ============================================================ */ h1, h2, h3, h4, h5, h6, .elementor-heading-title { font-family: var(--font-heading); font-weight: 700; color: var(--color-headline); line-height: 1.15; letter-spacing: -0.01em; margin-top: 0; } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } h4 { font-size: var(--fs-h4); } h5 { font-size: var(--fs-h5); } h6 { font-size: var(--fs-h6); } p { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.75; margin-top: 0; } /* Elementor heading widget — font & size only, NO color (preserves Style tab) */ .elementor-widget-heading .elementor-heading-title { font-family: var(--font-heading); font-weight: 700; } .elementor-widget-heading .elementor-heading-title.elementor-size-xxl { font-size: var(--fs-h1); } .elementor-widget-heading .elementor-heading-title.elementor-size-xl { font-size: var(--fs-h2); } .elementor-widget-heading .elementor-heading-title.elementor-size-large { font-size: var(--fs-h3); } .elementor-widget-heading .elementor-heading-title.elementor-size-medium { font-size: var(--fs-h4); } .elementor-widget-heading .elementor-heading-title.elementor-size-small { font-size: var(--fs-h5); } /* Text editor widget — font & size only, NO color */ .elementor-widget-text-editor, .elementor-widget-text-editor p { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; line-height: 1.75; } /* ============================================================ 4. TYPOGRAPHY — Tablet (max-width: 1024px) ============================================================ */ @media (max-width: 1024px) { :root { --fs-h1: clamp(2.2rem, 5vw, 3.5rem); --fs-h2: clamp(1.7rem, 3.5vw, 2.5rem); --fs-h3: clamp(1.3rem, 2.5vw, 1.9rem); --fs-h4: 1.4rem; --fs-body: 1rem; } } /* ============================================================ 5. TYPOGRAPHY — Mobile (max-width: 767px) ============================================================ */ @media (max-width: 767px) { :root { --fs-h1: 2.4rem; --fs-h2: 2rem; --fs-h3: 1.5rem; --fs-h4: 1.25rem; --fs-body: 1rem; } h1, h2, h3, h4, h5, h6, .elementor-heading-title { letter-spacing: 0; } } /* ============================================================ 6. ELEMENTOR CONTAINER & SECTION LAYOUT ============================================================ */ /* Flexbox containers */ .e-con, .e-con-inner { max-width: var(--container-max); } /* Wide sections */ .e-con.e-con--wide, .elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--container-wide); } /* Standard section inner container */ .elementor-section > .elementor-container { max-width: var(--container-max); } /* Section padding — intentionally NOT set globally. Elementor controls padding per-section via the Layout tab. Use utility classes below (.pt-lg, .pb-lg etc.) on specific sections if you need a quick override via CSS Classes. */ /* ============================================================ 7. ELEMENTOR COLUMNS & INNER SECTION ============================================================ */ /* Column padding — intentionally NOT set globally. Controlled per-column via Elementor Layout tab. */ .elementor-inner-section { width: 100%; } /* ============================================================ 8. BUTTONS ============================================================ */ /* Primary button — solid blue */ .elementor-button, .elementor-button-wrapper .elementor-button, a.elementor-button { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; letter-spacing: 0.02em; text-transform: none; border-radius: var(--radius-sm); padding: 0.85em 2em; transition: background-color var(--transition), color var(--transition), box-shadow var(--transition); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; } /* Default Elementor button skin — blue */ .elementor-button.elementor-size-sm { font-size: 0.875rem; padding: 0.7em 1.5em; } .elementor-button.elementor-size-md { font-size: 1rem; padding: 0.85em 2em; } .elementor-button.elementor-size-lg { font-size: 1.125rem; padding: 1em 2.5em; } .elementor-button.elementor-size-xl { font-size: 1.25rem; padding: 1.1em 2.8em; } /* Utility classes for button variants — apply via Elementor Advanced → CSS Classes */ /* .btn-primary — solid blue */ .btn-primary.elementor-button, a.btn-primary.elementor-button { background-color: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary); } .btn-primary.elementor-button:hover, a.btn-primary.elementor-button:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); box-shadow: var(--shadow-blue); } /* .btn-accent — lime yellow (hero CTA, "Get a Free Quote") */ .btn-accent.elementor-button, a.btn-accent.elementor-button { background-color: var(--color-accent); color: var(--color-dark); border: 2px solid var(--color-accent); } .btn-accent.elementor-button:hover, a.btn-accent.elementor-button:hover { background-color: #b8e600; border-color: #b8e600; color: var(--color-dark); } /* .btn-outline — white outline (on dark/blue backgrounds) */ .btn-outline.elementor-button, a.btn-outline.elementor-button { background-color: transparent; color: var(--color-white); border: 2px solid var(--color-white); } .btn-outline.elementor-button:hover, a.btn-outline.elementor-button:hover { background-color: var(--color-white); color: var(--color-dark); } /* .btn-outline-dark — dark outline (on light backgrounds) */ .btn-outline-dark.elementor-button, a.btn-outline-dark.elementor-button { background-color: transparent; color: var(--color-dark); border: 2px solid var(--color-dark); } .btn-outline-dark.elementor-button:hover, a.btn-outline-dark.elementor-button:hover { background-color: var(--color-dark); color: var(--color-white); } /* .btn-pill — rounded pill shape */ .btn-pill.elementor-button, a.btn-pill.elementor-button { border-radius: var(--radius-pill); } /* ============================================================ 9. FORMS ============================================================ */ /* Elementor form fields */ .elementor-field-group input, .elementor-field-group textarea, .elementor-field-group select, .elementor-form .elementor-field { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 300; border-radius: var(--radius-sm); border: var(--border-width) solid var(--color-border); padding: 0.75em 1em; transition: border-color var(--transition), box-shadow var(--transition); width: 100%; } .elementor-field-group input:focus, .elementor-field-group textarea:focus, .elementor-field-group select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 156, 222, 0.15); } /* Form labels */ .elementor-field-label { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.03em; } /* Submit button */ .elementor-form .elementor-button[type="submit"] { font-family: var(--font-heading); font-weight: 700; background-color: var(--color-accent); color: var(--color-dark); border: none; border-radius: var(--radius-sm); width: 100%; padding: 1em 2em; font-size: 1rem; cursor: pointer; transition: background-color var(--transition); } .elementor-form .elementor-button[type="submit"]:hover { background-color: #b8e600; } /* Hero form card style — dark background form Apply class "form-card-dark" to the form widget's wrapping section/column */ .form-card-dark { background-color: var(--color-dark); border-radius: var(--radius-lg); border: 2px solid var(--color-card-border); padding: 2rem; } .form-card-dark .elementor-field-group input, .form-card-dark .elementor-field-group textarea, .form-card-dark .elementor-field-group select { background-color: var(--color-input-bg); border-color: var(--color-input-bg); color: var(--color-text-light); } .form-card-dark .elementor-field-group input::placeholder, .form-card-dark .elementor-field-group textarea::placeholder { color: rgba(255, 255, 255, 0.4); } .form-card-dark .elementor-field-group input:focus, .form-card-dark .elementor-field-group textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 156, 222, 0.2); } .form-card-dark .elementor-field-label { color: var(--color-text-light); } /* ============================================================ 10. LINKS & HOVER STATES ============================================================ */ a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-secondary); text-decoration: none; } /* Nav menu links */ .elementor-nav-menu a, .elementor-nav-menu--main .elementor-item { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 400; transition: color var(--transition); } .elementor-nav-menu a:hover, .elementor-nav-menu--main .elementor-item:hover { color: var(--color-primary); } /* ============================================================ 11. UTILITY CLASSES Apply via Elementor → Advanced → CSS Classes ============================================================ */ /* .img-zoom — Image hover zoom (overflow hidden clips the zoom) Apply to: Image widget, Image Box, or wrapping Column/Container */ .img-zoom { overflow: hidden !important; } .img-zoom img { transition: transform 0.4s ease !important; display: block; width: 100%; } .img-zoom:hover img { transform: scale(1.07) !important; } /* Background colours */ .bg-primary { background-color: var(--color-primary) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-accent { background-color: var(--color-accent) !important; } .bg-dark { background-color: var(--color-dark) !important; } .bg-light { background-color: var(--color-bg-light) !important; } .bg-white { background-color: var(--color-white) !important; } /* Text colours */ .text-primary { color: var(--color-primary) !important; } .text-secondary { color: var(--color-secondary) !important; } .text-accent { color: var(--color-accent) !important; } .text-dark { color: var(--color-dark) !important; } .text-white { color: var(--color-white) !important; } .text-muted { color: var(--color-text-muted) !important; } /* Spacing — sections */ .pt-xl { padding-top: var(--space-xl) !important; } .pb-xl { padding-bottom: var(--space-xl) !important; } .pt-lg { padding-top: var(--space-lg) !important; } .pb-lg { padding-bottom: var(--space-lg) !important; } .pt-md { padding-top: var(--space-md) !important; } .pb-md { padding-bottom: var(--space-md) !important; } .pt-sm { padding-top: var(--space-sm) !important; } .pb-sm { padding-bottom: var(--space-sm) !important; } /* Spacing */ .mt-0 { margin-top: 0 !important; } .mb-0 { margin-bottom: 0 !important; } .pt-0 { padding-top: 0 !important; } .pb-0 { padding-bottom: 0 !important; } .mt-sm { margin-top: var(--space-sm) !important; } .mb-sm { margin-bottom: var(--space-sm) !important; } .mt-md { margin-top: var(--space-md) !important; } .mb-md { margin-bottom: var(--space-md) !important; } /* Text alignment */ .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } /* Font weight */ .fw-light { font-weight: 300 !important; } .fw-regular { font-weight: 400 !important; } .fw-semibold { font-weight: 600 !important; } .fw-bold { font-weight: 700 !important; } /* Border radius */ .rounded-sm { border-radius: var(--radius-sm) !important; } .rounded-md { border-radius: var(--radius-md) !important; } .rounded-lg { border-radius: var(--radius-lg) !important; } .rounded-pill { border-radius: var(--radius-pill) !important; } /* Shadows */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } /* Hide by breakpoint */ @media (max-width: 767px) { .hide-mobile { display: none !important; } } @media (max-width: 1024px) { .hide-tablet { display: none !important; } } @media (min-width: 1025px) { .hide-desktop { display: none !important; } } /* ============================================================ 12. ELEMENTOR WIDGET OVERRIDES ============================================================ */ /* Icon Box */ .elementor-icon-box-title { font-family: var(--font-heading); font-weight: 700; } /* Image Box */ .elementor-image-box-title { font-family: var(--font-heading); font-weight: 700; } /* Testimonial */ .elementor-testimonial-content { font-family: var(--font-body); font-size: var(--fs-lg); font-style: italic; font-weight: 300; } /* Divider */ .elementor-divider-separator { border-color: var(--color-border); } /* Accordion / Toggle */ .elementor-accordion-title, .elementor-tab-title { font-family: var(--font-heading); font-weight: 700; } /* ============================================================ 13. CUSTOM COMPONENT STYLES Apply class in Elementor → Advanced → CSS Classes or ID ============================================================ */ /* .card-service — Service cards (Electrical, Air Conditioning, etc.) White card, rounded, dashed border, blue heading, Learn More button Apply to: Image Box widget or Section/Column wrapper */ .card-service { background-color: var(--color-white); border-radius: var(--radius-lg); border: 1.5px dashed var(--color-border); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); } .card-service:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); } /* .card-service-img — image area within service card */ .card-service .elementor-image-box-img img, .card-service img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; } /* .btn-learn-more — full-width blue bar button at card bottom Apply to Button widget inside service card */ .btn-learn-more.elementor-button, a.btn-learn-more.elementor-button { background-color: var(--color-primary); color: var(--color-white); font-family: var(--font-heading); font-weight: 700; border-radius: 0 0 var(--radius-lg) var(--radius-lg); width: 100%; text-align: center; padding: 1em; border: none; display: block; } .btn-learn-more.elementor-button:hover, a.btn-learn-more.elementor-button:hover { background-color: var(--color-secondary); color: var(--color-white); } /* .section-cta-blue — Full-width blue CTA band ("Ready to Get Started?") Apply to Section widget */ .section-cta-blue { background-color: var(--color-primary); } /* .phone-btn — Lime yellow phone number button in CTA band Apply to Button widget */ .phone-btn.elementor-button, a.phone-btn.elementor-button { background-color: var(--color-accent); color: var(--color-dark); font-family: var(--font-heading); font-weight: 700; border: none; border-radius: var(--radius-sm); } .phone-btn.elementor-button:hover, a.phone-btn.elementor-button:hover { background-color: #b8e600; color: var(--color-dark); } /* .quote-btn — White outline "Request a Quote" button in CTA band Apply to Button widget */ .quote-btn.elementor-button, a.quote-btn.elementor-button { background-color: transparent; color: var(--color-white); font-family: var(--font-heading); font-weight: 700; border: 2px solid var(--color-white); border-radius: var(--radius-sm); } .quote-btn.elementor-button:hover, a.quote-btn.elementor-button:hover { background-color: var(--color-white); color: var(--color-primary); } /* .nav-btn-book — "Book Now" outlined button in header nav Apply to Button widget in nav */ .nav-btn-book.elementor-button, a.nav-btn-book.elementor-button { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-sm); padding: 0.5em 1.2em; } .nav-btn-book.elementor-button:hover, a.nav-btn-book.elementor-button:hover { background-color: var(--color-primary); color: var(--color-white); } /* .nav-btn-call — Solid blue phone button in header nav Apply to Button widget in nav */ .nav-btn-call.elementor-button, a.nav-btn-call.elementor-button { background-color: var(--color-primary); color: var(--color-white); border: 2px solid var(--color-primary); font-family: var(--font-body); font-weight: 600; font-size: 0.9rem; border-radius: var(--radius-sm); padding: 0.5em 1.2em; } .nav-btn-call.elementor-button:hover, a.nav-btn-call.elementor-button:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-white); } /* .logo-bar — Accreditations / partner logo row Apply to Section containing logos */ .logo-bar img { filter: grayscale(100%); opacity: 0.5; transition: filter var(--transition), opacity var(--transition); } .logo-bar img:hover { filter: grayscale(0%); opacity: 1; } /* ============================================================ 14. HORIZONTAL SCROLL CAROUSEL Classes: .scroll-x-mobile / .scroll-x-peek Apply to: Section or Container widget via Advanced → CSS Classes Effect: Child columns/cards scroll left-right on ALL screen sizes. Includes: progress bar indicator below the scroll track. ============================================================ */ /* Wrapper — position relative for progress bar pseudo-elements */ .scroll-x-mobile, .scroll-x-peek { position: relative !important; } /* Shared scroll track — all screen sizes */ .scroll-x-mobile > .elementor-container, .scroll-x-mobile > .e-con-inner, .scroll-x-mobile.e-con > .e-con-inner, .scroll-x-mobile, .scroll-x-peek > .elementor-container, .scroll-x-peek > .e-con-inner, .scroll-x-peek.e-con > .e-con-inner, .scroll-x-peek { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 1rem; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; padding-bottom: 1.5rem !important; /* space for progress bar */ scrollbar-width: none; -ms-overflow-style: none; } /* Hide native scrollbar — all browsers */ .scroll-x-mobile > .elementor-container::-webkit-scrollbar, .scroll-x-mobile > .e-con-inner::-webkit-scrollbar, .scroll-x-mobile::-webkit-scrollbar, .scroll-x-peek > .elementor-container::-webkit-scrollbar, .scroll-x-peek > .e-con-inner::-webkit-scrollbar, .scroll-x-peek::-webkit-scrollbar { display: none; } /* Progress bar track — only shows when JS confirms scroll is active */ .scroll-x-mobile.has-scroll::after, .scroll-x-peek.has-scroll::after { content: ''; display: block; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); height: 3px; background-color: var(--color-border); border-radius: var(--radius-pill); } /* Progress bar thumb — only shows when JS confirms scroll is active */ .scroll-x-mobile.has-scroll::before, .scroll-x-peek.has-scroll::before { content: ''; display: block; position: absolute; bottom: 0; left: var(--gutter); height: 3px; width: calc((100% - (var(--gutter) * 2)) * var(--scroll-pct, 0.25)); background-color: var(--color-primary); border-radius: var(--radius-pill); transition: width 0.1s ease; z-index: 1; } /* .scroll-x-mobile card widths — responsive */ .scroll-x-mobile .elementor-column, .scroll-x-mobile > .e-con-inner > .e-con, .scroll-x-mobile > .e-con { flex: 0 0 30% !important; /* desktop — ~3 cards visible */ width: 30% !important; max-width: 30% !important; scroll-snap-align: start; } @media (max-width: 1024px) { .scroll-x-mobile .elementor-column, .scroll-x-mobile > .e-con-inner > .e-con, .scroll-x-mobile > .e-con { flex: 0 0 55% !important; /* tablet — ~1.8 cards visible */ width: 55% !important; max-width: 55% !important; } } @media (max-width: 767px) { .scroll-x-mobile .elementor-column, .scroll-x-mobile > .e-con-inner > .e-con, .scroll-x-mobile > .e-con { flex: 0 0 80% !important; /* mobile — ~1.2 cards visible */ width: 80% !important; max-width: 80% !important; } } /* .scroll-x-peek card widths — tighter, more peek */ .scroll-x-peek .elementor-column, .scroll-x-peek > .e-con-inner > .e-con, .scroll-x-peek > .e-con { flex: 0 0 24% !important; /* desktop — ~4 cards visible */ width: 24% !important; max-width: 24% !important; scroll-snap-align: start; } @media (max-width: 1024px) { .scroll-x-peek .elementor-column, .scroll-x-peek > .e-con-inner > .e-con, .scroll-x-peek > .e-con { flex: 0 0 44% !important; /* tablet — ~2.2 cards visible */ width: 44% !important; max-width: 44% !important; } } @media (max-width: 767px) { .scroll-x-peek .elementor-column, .scroll-x-peek > .e-con-inner > .e-con, .scroll-x-peek > .e-con { flex: 0 0 72% !important; /* mobile — ~1.4 cards visible */ width: 72% !important; max-width: 72% !important; } } /* Prevent page-level horizontal overflow on mobile only */ @media (max-width: 767px) { body { overflow-x: hidden; } } /* ─── DESIGN SUMMARY ───────────────────────────────────────── Primary colour: #009CDE (from Elementor System Colors) Secondary colour: #00C7EE (from Elementor System Colors) Accent colour: #CEFF00 (lime yellow — CTA buttons) Text colour: #1a1a1a (near-black, warmer than #000000) Dark navy: #0D1B2E (hero bg, inferred from screenshot) Heading font: halyard-display, 700 Bold ⚠ Commercial font — NOT on Google Fonts Load via Adobe Fonts kit in Elementor Custom Code Body font: Open Sans, 300 Light Google Fonts ✅ — imported at top of this file Google Fonts URL: https://fonts.google.com/specimen/Open+Sans ──────────────────────────────────────────────────────────── *//* End custom CSS */