/* ========================================================================== EZI Loads — Theme design system Colours/fonts are driven by CSS variables output from Theme Options (see inc/dynamic-css.php). Fallback defaults declared here. ========================================================================== */ :root { --ezi-primary: #0b4499; --ezi-primary-rgb: 11, 68, 153; --ezi-accent: #db0029; --ezi-accent-rgb: 219, 0, 41; --ezi-dark: #0d1b2e; --ezi-dark-rgb: 13, 27, 46; --ezi-light: #f4f6fa; --ezi-heading: #0d1b2e; --ezi-text: #0d1b2e; --ezi-muted: #5b6b80; --ezi-footer-bg: #0b4499; --ezi-footer-text: #ffffff; --ezi-font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ezi-font-body: "Geist", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ezi-base-size: 16px; --ezi-h-tracking: -1.5px; --ezi-radius: 8px; --ezi-gutter: 80px; --ezi-maxw: 1440px; --ezi-content: 1280px; /* boxed content width (design spec) */ --ezi-heading-gap: 20px; /* consistent gap between a heading and the text below it */ --ezi-section-y: 88px; --ezi-shadow: 0 10px 30px rgba(13, 27, 46, .08); --ezi-shadow-lg: 0 20px 50px rgba(13, 27, 46, .14); } /* ------------------------------ Base ------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--ezi-font-body); font-size: var(--ezi-base-size); line-height: 1.6; color: var(--ezi-text); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ezi-primary); text-decoration: none; transition: color .2s, opacity .2s; } a:hover { color: var(--ezi-accent); } h1, h2, h3, h4, h5, h6 { font-family: var(--ezi-font-heading); color: var(--ezi-heading); font-weight: 800; line-height: 1.12; margin: 0 0 .5em; } h1 { font-size: clamp(2.25rem, 4.5vw, 4rem); letter-spacing: var(--ezi-h-tracking); } h2 { font-size: clamp(1.9rem, 3.6vw, 3.5rem); letter-spacing: var(--ezi-h-tracking); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } p { margin: 0 0 1rem; } .ezi-accent { color: var(--ezi-primary); } .ezi-container { width: min(100% - 40px, var(--ezi-content)); margin-inline: auto; padding: 0; } .ezi-main { overflow: hidden; } .ezi-section { padding: var(--ezi-section-y) 0; } .ezi-section--light { background: var(--ezi-light); } .ezi-skip-link { position: absolute; left: -9999px; } .ezi-skip-link:focus { left: 16px; top: 16px; background: #fff; padding: 10px 16px; z-index: 9999; border-radius: 6px; } /* --------------------------- WPBakery integration ------------------------ */ /* Boxed page container — WPBakery rows sit inside this and box to 1280px. */ .ezi-page-content { width: min(100% - 40px, var(--ezi-content)); margin-inline: auto; padding: 0; } .ezi-page-content > .vc_row, .ezi-page-content > .wpb_row { margin-bottom: 0; } /* Section vertical padding + helper spacing (use as WPBakery row "Extra class name"). */ .ezi-py { padding-top: var(--ezi-section-y); padding-bottom: var(--ezi-section-y); } .ezi-pt { padding-top: var(--ezi-section-y); } .ezi-pb { padding-bottom: var(--ezi-section-y); } .ezi-gap-sm { padding-top: 24px; padding-bottom: 24px; } .ezi-pt-lg { padding-top: 130px; } .ezi-pb-lg { padding-bottom: 130px; } /* Equal-height tiles: make a WPBakery row flex so its columns stretch to the tallest, and let the tile fill its column. Add class "ezi-tiles" to the row. */ .ezi-tiles.vc_row, .ezi-tiles.vc_row-inner, .ezi-tiles { display: flex; flex-wrap: wrap; align-items: stretch; row-gap: 24px; } .ezi-tiles > .wpb_column, .ezi-tiles > .vc_column_container { display: flex; } .ezi-tiles > .wpb_column > .vc_column-inner, .ezi-tiles > .vc_column_container > .vc_column-inner { display: flex; flex-direction: column; width: 100%; } .ezi-tiles .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; } .ezi-tiles .ezi-service-box, .ezi-tiles .ezi-testimonial { flex: 1 1 auto; } /* Vertical space between stacked tile rows, and between a section heading and the first tile row (WPBakery inner rows carry no vertical margin by default). */ .ezi-tiles.vc_inner { margin-top: 32px; } .ezi-heading + .vc_inner.ezi-tiles { margin-top: 40px; } /* Full-bleed coloured bands: content stays boxed, a ::before paints edge-to-edge. Add e.g. class "ezi-band ezi-band--blue ezi-py" to a WPBakery row. */ .ezi-band { position: relative; z-index: 0; } .ezi-band > * { position: relative; z-index: 1; } /* High specificity + !important so we beat WPBakery's .vc_row:before clearfix. */ .ezi-band::before, .vc_row.ezi-band::before, .wpb_row.ezi-band::before { content: "" !important; display: block !important; position: absolute !important; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; clear: none; } .ezi-band--light::before, .vc_row.ezi-band--light::before { background: var(--ezi-light); } .ezi-band--blue::before, .vc_row.ezi-band--blue::before { background: var(--ezi-primary); } .ezi-band--navy::before, .vc_row.ezi-band--navy::before { background: var(--ezi-dark); } .ezi-band--blue, .ezi-band--navy { color: #fff; } .ezi-band--blue :is(h1,h2,h3,h4,p,li), .ezi-band--navy :is(h1,h2,h3,h4,p,li) { color: #fff; } .ezi-band--blue .ezi-eyebrow, .ezi-band--navy .ezi-eyebrow { color: #fff; opacity: .85; } /* On dark bands, an un-coloured highlight defaults to white (no underline). A chosen Highlight Colour sets an inline style, which wins over this. */ .ezi-band--blue .ezi-accent:not([style]), .ezi-band--navy .ezi-accent:not([style]) { color: #fff; } /* A boxed light section (non full-bleed) helper. */ .ezi-panel-light { background: var(--ezi-light); border-radius: var(--ezi-radius); } /* --------------------------- Buttons ------------------------------------- */ .ezi-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ezi-font-heading); font-weight: 700; font-size: 14px; border-radius: var(--ezi-radius); cursor: pointer; border: 1px solid transparent; transition: transform .15s, background .2s, color .2s, border-color .2s, box-shadow .2s; line-height: 1; text-align: center; } .ezi-btn .ezi-icon { transition: transform .2s; } .ezi-btn:hover .ezi-icon { transform: translateX(3px); } .ezi-btn--md { padding: 12px 20px; } .ezi-btn--lg { padding: 16px 28px; font-size: 15px; } .ezi-btn--primary { background: var(--ezi-primary); color: #fff; } .ezi-btn--primary:hover { background: #093a83; color: #fff; } .ezi-btn--red { background: var(--ezi-accent); color: #fff; } .ezi-btn--red:hover { background: #b8001f; color: #fff; } .ezi-btn--white { background: #fff; color: var(--ezi-primary); } .ezi-btn--white:hover { background: #eef2fb; color: var(--ezi-primary); } .ezi-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); } .ezi-btn--outline:hover { background: #fff; color: var(--ezi-dark); } .ezi-btn--ghost { background: transparent; color: var(--ezi-dark); border-color: rgba(var(--ezi-dark-rgb), .2); } .ezi-btn--ghost:hover { background: var(--ezi-dark); color: #fff; } /* On solid blue / navy background sections a blue "primary" button blends into the background, so switch it to the red accent for strong, on-brand contrast. This covers coloured bands, blue/navy CTA boxes, and heroes that use a solid blue overlay (ov-blue). Photo heroes with a dark overlay (ov-dark) keep the blue button, since the image behind it gives enough contrast. */ .ezi-band--blue .ezi-btn--primary, .ezi-band--navy .ezi-btn--primary, .ezi-cta--blue .ezi-btn--primary, .ezi-cta--navy .ezi-btn--primary, .ezi-hero--ov-blue .ezi-btn--primary { background: var(--ezi-accent); color: #fff; } .ezi-band--blue .ezi-btn--primary:hover, .ezi-band--navy .ezi-btn--primary:hover, .ezi-cta--blue .ezi-btn--primary:hover, .ezi-cta--navy .ezi-btn--primary:hover, .ezi-hero--ov-blue .ezi-btn--primary:hover { background: #b8001f; color: #fff; } .ezi-btn-wrap { display: flex; } .ezi-btn-wrap--center { justify-content: center; } .ezi-btn-wrap--right { justify-content: flex-end; } /* Inline arrow link (Learn More) */ .ezi-link { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ezi-font-heading); font-weight: 700; font-size: 14px; color: var(--ezi-primary); } .ezi-link .ezi-icon { transition: transform .2s; } .ezi-link:hover { color: var(--ezi-primary); } .ezi-link:hover .ezi-icon { transform: translateX(3px); } /* Eyebrow + badge */ .ezi-eyebrow { font-family: var(--ezi-font-heading); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--ezi-primary); margin: 0 0 12px; } .ezi-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--ezi-accent); color: #fff; border-radius: 99px; padding: 8px 16px; font-family: var(--ezi-font-heading); font-weight: 600; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .ezi-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; } /* --------------------------- Header / Navbar ----------------------------- */ .ezi-header { position: relative; z-index: 500; padding: 24px 0; } .ezi-header.is-sticky { position: sticky; top: 0; } .ezi-navbar { display: flex; align-items: center; gap: 24px; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border: 1px solid rgba(255,255,255,.6); box-shadow: var(--ezi-shadow); border-radius: var(--ezi-radius); padding: 0 16px 0 28px; height: 80px; } .ezi-navbar__logo { display: flex; align-items: center; } .ezi-navbar__logo img { max-height: 48px; max-width: 220px; width: auto; height: auto; object-fit: contain; } .ezi-navbar__menu { margin-left: auto; } .ezi-menu { list-style: none; display: flex; align-items: center; gap: 28px; margin: 0; padding: 0; position: relative; } .ezi-menu > li { position: relative; } .ezi-menu a { font-family: var(--ezi-font-heading); font-weight: 600; font-size: 15px; color: var(--ezi-dark); padding: 6px 4px; position: relative; } .ezi-menu a:hover, .ezi-menu .current-menu-item > a { color: var(--ezi-primary); } .ezi-menu .current-menu-item > a { font-weight: 700; } /* active = bold, rest = semibold */ /* Fallback per-item underline (shown only if the JS sliding indicator isn't active). */ .ezi-menu a::after { content: ""; position: absolute; left: -8px; right: -8px; bottom: -3px; height: 2px; background: var(--ezi-primary); transform: scaleX(0); transform-origin: right center; transition: transform .28s ease; } .ezi-menu a:hover::after, .ezi-menu .current-menu-item > a::after { transform: scaleX(1); transform-origin: left center; } /* One blue bar that glides between items and back (JS-driven). */ .ezi-menu.has-indicator > li > a::after { display: none; } .ezi-menu__indicator { position: absolute; left: 0; bottom: -6px; height: 2px; width: 0; background: var(--ezi-primary); opacity: 0; pointer-events: none; transition: transform .32s cubic-bezier(.4,0,.2,1), width .32s cubic-bezier(.4,0,.2,1), opacity .2s ease; } /* Dropdowns — clean white card, with a springy "flip-down" reveal. */ .ezi-menu .menu-item-has-children { perspective: 1500px; } .ezi-menu .menu-item-has-children > a { padding-right: 18px; } .ezi-menu .menu-item-has-children > a::before { content: ""; position: absolute; right: 2px; top: 45%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); opacity: .7; transition: transform .3s cubic-bezier(.34,1.4,.5,1), opacity .2s ease; } .ezi-menu .menu-item-has-children:hover > a::before, .ezi-menu .menu-item-has-children:focus-within > a::before { transform: translateY(-25%) rotate(-135deg); opacity: 1; } .ezi-menu .menu-item-has-children::after { /* invisible hover bridge over the gap */ content: ""; position: absolute; top: 100%; left: -14px; right: -14px; height: 22px; } .ezi-menu .sub-menu { position: absolute; top: 100%; left: -14px; min-width: 232px; list-style: none; margin: 16px 0 0; padding: 8px; background: #fff; border-radius: 12px; box-shadow: var(--ezi-shadow-lg); opacity: 0; visibility: hidden; transform: rotateX(-88deg); transform-origin: top center; transition: opacity .16s ease, transform .42s cubic-bezier(.3,1.35,.5,1), visibility .42s; z-index: 700; } .ezi-menu .menu-item-has-children:hover > .sub-menu, .ezi-menu .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: rotateX(0deg); } .ezi-menu .sub-menu li { display: block; } .ezi-menu .sub-menu a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--ezi-dark) !important; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .18s ease, color .18s ease; } .ezi-menu .sub-menu a::before, .ezi-menu .sub-menu a::after { display: none; } .ezi-menu .sub-menu a:hover { background: var(--ezi-light); color: var(--ezi-primary) !important; } .ezi-navbar__actions { display: flex; align-items: center; gap: 10px; } .ezi-navbar__toggle { display: none; background: none; border: none; color: var(--ezi-dark); cursor: pointer; padding: 6px; } /* Transparent over hero */ .ezi-header.is-transparent { position: absolute; left: 0; right: 0; top: 0; } /* Frosted glass over the hero, tuned low-opacity so WHITE nav text reads. */ .ezi-header.is-transparent .ezi-navbar { background: rgba(255,255,255,.45); border-color: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); } .ezi-header.is-transparent:not(.is-scrolled) .ezi-menu > li > a { color: #fff; } .ezi-header.is-transparent:not(.is-scrolled) .ezi-menu > li > a:hover { color: var(--ezi-primary); opacity: 1; } .ezi-header.is-transparent:not(.is-scrolled) .ezi-menu > .current-menu-item > a { color: var(--ezi-primary); opacity: 1; } .ezi-header.is-transparent:not(.is-scrolled) .ezi-navbar__toggle { color: #fff; } /* When scrolled, the JS adds .is-scrolled to make it solid */ .ezi-header.is-scrolled { position: fixed; left: 0; right: 0; top: 0; padding: 12px 0; animation: eziDrop .3s ease; } .ezi-header.is-scrolled .ezi-navbar { background: rgba(255,255,255,.75); border-color: rgba(13,27,46,.06); } .ezi-header.is-scrolled .ezi-menu a { color: var(--ezi-dark); } /* Scrolled (solid) nav: dark text, blue hover + blue underline (not white). */ .ezi-header.is-scrolled .ezi-menu a:hover, .ezi-header.is-scrolled .ezi-menu .current-menu-item > a { color: var(--ezi-primary); } .ezi-header.is-scrolled .ezi-menu a::after { background: var(--ezi-primary); } @keyframes eziDrop { from { transform: translateY(-100%); } to { transform: translateY(0); } } /* Offset the floating header below the WP admin bar for logged-in users. */ body.admin-bar .ezi-header.is-transparent, body.admin-bar .ezi-header.is-scrolled { top: 32px; } @media screen and (max-width: 782px) { body.admin-bar .ezi-header.is-transparent, body.admin-bar .ezi-header.is-scrolled { top: 46px; } } /* Mobile drawer */ .ezi-mobile-nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); background: #fff; box-shadow: var(--ezi-shadow-lg); transform: translateX(100%); transition: transform .3s ease; z-index: 999; padding: 90px 28px 28px; overflow-y: auto; } .ezi-mobile-nav.is-open { transform: translateX(0); } body.ezi-nav-open { overflow: hidden; } /* Lift the header (which contains the drawer) above the backdrop so menu items are clickable. */ body.ezi-nav-open .ezi-header { z-index: 1001; } .ezi-mobile-nav__inner { display: flex; flex-direction: column; gap: 18px; } .ezi-mobile-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .ezi-mobile-menu a { display: block; padding: 10px 0; font-family: var(--ezi-font-heading); font-weight: 600; color: var(--ezi-dark); border-bottom: 1px solid #eef1f5; } .ezi-mobile-menu .menu-item-has-children { position: relative; } /* Collapsible sub-menu (click to expand — no hover/scroll needed on touch). */ .ezi-mobile-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 16px; max-height: 0; overflow: hidden; transition: max-height .32s ease; } .ezi-mobile-menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; margin: 0 0 4px; } .ezi-mobile-menu .sub-menu a { font-weight: 400; font-size: 14px; color: var(--ezi-muted); padding: 8px 0; } .ezi-mobile-menu .sub-menu a:hover { color: var(--ezi-primary); } /* Tap-target caret injected by JS on parent items. */ .ezi-mobile-caret { position: absolute; top: 2px; right: 0; width: 44px; height: 44px; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--ezi-dark); } .ezi-mobile-caret::before { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s ease; } .ezi-mobile-menu .menu-item-has-children.is-open > .ezi-mobile-caret::before { transform: translateY(2px) rotate(-135deg); } .ezi-mobile-socials { display: flex; gap: 10px; } .ezi-mobile-socials a { width: 38px; height: 38px; border-radius: 8px; background: var(--ezi-light); display: grid; place-items: center; color: var(--ezi-primary); } .ezi-nav-backdrop { position: fixed; inset: 0; background: rgba(13,27,46,.5); opacity: 0; visibility: hidden; transition: .3s; z-index: 998; } .ezi-nav-backdrop.is-open { opacity: 1; visibility: visible; } /* ------------------------------ Ticker ----------------------------------- */ .ezi-ticker { overflow: hidden; background: var(--ezi-light); border-top: 1px solid rgba(13,27,46,.06); border-bottom: 1px solid rgba(13,27,46,.06); /* Always full-bleed, even inside the boxed 1280 content. */ position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; } .ezi-ticker--blue { background: var(--ezi-primary); } .ezi-ticker--navy { background: var(--ezi-dark); } .ezi-ticker__track { display: inline-flex; align-items: center; gap: 48px; white-space: nowrap; padding: 16px 0; animation: eziMarquee 40s linear infinite; } .ezi-ticker__item { font-family: var(--ezi-font-heading); font-weight: 600; font-size: 15px; color: var(--ezi-dark); } .ezi-ticker--blue .ezi-ticker__item, .ezi-ticker--navy .ezi-ticker__item { color: #fff; } .ezi-ticker__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ezi-accent); flex: 0 0 auto; } .ezi-ticker--blue .ezi-ticker__dot, .ezi-ticker--navy .ezi-ticker__dot { background: #fff; } .ezi-ticker:hover .ezi-ticker__track { animation-play-state: paused; } @keyframes eziMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------ Hero ------------------------------------- */ .ezi-hero { position: relative; background-size: cover; background-position: center; background-color: var(--ezi-dark); /* fallback before a hero image is set */ color: #fff; display: flex; align-items: center; /* Full-bleed breakout that is scrollbar-aware: 100vw includes the scrollbar, which would shift the hero (and its content) off the page grid. Using the true content width (100vw - scrollbar) keeps the hero content aligned with the header bar and page sections at every width. --sbw is set in JS; it falls back to 0 (correct for touch/overlay scrollbars). */ width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - (100vw - var(--sbw, 0px)) / 2); margin-right: calc(50% - (100vw - var(--sbw, 0px)) / 2); } .ezi-hero--h-tall { min-height: 760px; padding: 180px 0 90px; } .ezi-hero--h-medium { min-height: 560px; padding: 170px 0 80px; } .ezi-hero--h-compact { min-height: 420px; padding: 150px 0 70px; } .ezi-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; } .ezi-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; border: 0; } /* Dark (navy) overlay: diagonal, 65% at bottom-left fading to 25% at top-right. */ .ezi-hero--ov-dark::before { background: linear-gradient(to top right, rgba(var(--ezi-dark-rgb), .65) 0%, rgba(var(--ezi-dark-rgb), .25) 100%); } .ezi-hero--ov-blue::before { background: linear-gradient(90deg, rgba(var(--ezi-primary-rgb),.92) 0%, rgba(var(--ezi-primary-rgb),.6) 100%); } .ezi-hero--ov-none::before { background: transparent; } /* Video hero keeps the same overlay treatment as its chosen style (dark = diagonal above). */ .ezi-hero--has-video.ezi-hero--ov-blue::before, .ezi-hero--has-video.ezi-hero--ov-none::before { background: linear-gradient(180deg, rgba(var(--ezi-dark-rgb), .28) 0%, rgba(var(--ezi-dark-rgb), .55) 55%, rgba(var(--ezi-dark-rgb), .92) 100%); } .ezi-hero .ezi-container { position: relative; z-index: 2; } .ezi-hero__content { max-width: 840px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ezi-heading-gap); } .ezi-hero__title { color: #fff; font-size: clamp(2.5rem, 5vw, 4rem); margin: 0; } .ezi-hero__subtext { color: rgba(255,255,255,.9); font-size: 1.05rem; max-width: 560px; margin: 0; } .ezi-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; } /* Interior page hero */ .ezi-page-hero { background: linear-gradient(120deg, var(--ezi-primary), var(--ezi-dark)); background-size: cover; background-position: center; color: #fff; padding: 180px 0 70px; } .ezi-page-hero.has-image { padding: 200px 0 80px; } .ezi-page-hero__title { color: #fff; margin: var(--ezi-heading-gap) 0 0; font-size: clamp(2.2rem, 4vw, 3.4rem); } .ezi-page-hero__subtitle { color: rgba(255,255,255,.85); margin: var(--ezi-heading-gap) 0 0; max-width: 640px; } .ezi-breadcrumbs { font-size: 14px; color: rgba(255,255,255,.8); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ezi-breadcrumbs a { color: rgba(255,255,255,.8); } .ezi-breadcrumbs a:hover { color: #fff; } .ezi-breadcrumbs .sep { opacity: .5; } /* --------------------------- Section heading ----------------------------- */ .ezi-heading { display: flex; flex-direction: column; gap: var(--ezi-heading-gap); margin-bottom: 8px; } .ezi-heading--center { align-items: center; text-align: center; } .ezi-heading--left { align-items: flex-start; text-align: left; } .ezi-heading__title { margin: 0; } .ezi-heading__intro { color: var(--ezi-muted); max-width: 620px; margin: 0; } .ezi-heading--dark .ezi-heading__title { color: #fff; } .ezi-heading--dark .ezi-heading__intro { color: rgba(255,255,255,.82); } .ezi-heading--dark .ezi-accent:not([style]) { color: #fff; } /* --------------------------- Service box --------------------------------- */ .ezi-service-box { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; background: #fff; border-radius: var(--ezi-radius); padding: 40px 32px 32px; box-shadow: var(--ezi-shadow); height: 100%; transition: transform .2s, box-shadow .2s; color: var(--ezi-text); } a.ezi-service-box:hover { transform: translateY(-4px); box-shadow: var(--ezi-shadow-lg); color: var(--ezi-text); } .ezi-service-box:hover .ezi-icon { transform: translateX(3px); } /* move arrow on whole-tile hover */ .ezi-service-box__bar { width: 56px; height: 6px; border-radius: 8px; background: var(--ezi-accent); display: block; } /* Photo card variant: cover photo across the top (rounded by the card), no red bar. */ .ezi-service-box--photo { padding: 0 28px 30px; overflow: hidden; gap: 12px; } .ezi-service-box__photo { display: block; flex: 0 0 auto; width: calc(100% + 56px); margin: 0 -28px 12px; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: var(--ezi-light); } /* Calm hover for photo tiles: no lift, no zoom — just a softly deeper shadow. */ a.ezi-service-box--photo:hover { transform: none; box-shadow: var(--ezi-shadow-lg); } .ezi-service-box--photo .ezi-service-box__title { font-size: 1.3rem; } .ezi-service-box__icon img { width: 44px; height: 44px; object-fit: contain; } .ezi-service-box__title { margin: 0; font-size: 1.4rem; } .ezi-service-box__text { color: var(--ezi-muted); font-size: .95rem; margin: 0; } .ezi-service-box__link { margin-top: auto; } /* --------------------------- Team member --------------------------------- */ .ezi-team-member { display: flex; flex-direction: column; gap: 14px; } .ezi-team-member__photo { position: relative; aspect-ratio: 4 / 5.2; border-radius: var(--ezi-radius); background-size: cover; background-position: center top; overflow: hidden; background-color: var(--ezi-light); } .ezi-team-member__socials { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; opacity: 0; transform: translateY(8px); transition: .25s; } /* Branded fallback: show the whole EZI Loads logo, centred, never cropped. */ .ezi-team-member__photo--placeholder { background-size: contain; background-position: center center; background-repeat: no-repeat; } .ezi-team-member__photo:hover .ezi-team-member__socials { opacity: 1; transform: translateY(0); } .ezi-team-member__socials a { width: 36px; height: 36px; border-radius: 8px; background: #fff; color: var(--ezi-primary); display: grid; place-items: center; box-shadow: var(--ezi-shadow); } .ezi-team-member__info { } .ezi-team-member__name { margin: 0; font-size: 1.15rem; } .ezi-team-member__role { margin: 2px 0 0; color: var(--ezi-muted); font-size: .9rem; } .ezi-team-member__bio { margin: 8px 0 0; color: var(--ezi-muted); font-size: .88rem; } /* --------------------------- Testimonial --------------------------------- */ .ezi-testimonial { display: flex; flex-direction: column; gap: 18px; background: #fff; border: 1px solid #eef1f5; border-radius: var(--ezi-radius); padding: 32px; margin: 0; height: 100%; box-shadow: var(--ezi-shadow); } .ezi-testimonial__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .ezi-testimonial__logo { max-height: 60px; width: auto; max-width: 200px; } .ezi-testimonial__mark { color: var(--ezi-accent); } .ezi-testimonial__company { font-family: var(--ezi-font-heading); font-weight: 700; color: var(--ezi-dark); font-size: 1.05rem; line-height: 1.2; } .ezi-testimonial__quote { margin: 0; font-size: 1rem; color: var(--ezi-dark); line-height: 1.6; } .ezi-testimonial__by { display: flex; align-items: center; gap: 12px; margin-top: auto; } .ezi-testimonial__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; } .ezi-testimonial__name { display: block; font-family: var(--ezi-font-heading); color: var(--ezi-dark); font-size: .95rem; } .ezi-testimonial__role { display: block; color: var(--ezi-muted); font-size: .82rem; } /* ------------------------------ Stat ------------------------------------- */ .ezi-stat { display: flex; flex-direction: column; gap: 6px; } .ezi-stat__number { font-family: var(--ezi-font-heading); font-weight: 800; font-size: clamp(2.2rem, 3.4vw, 3rem); color: var(--ezi-primary); margin: 0; line-height: 1; } .ezi-stat__label { font-family: var(--ezi-font-heading); font-weight: 700; color: var(--ezi-dark); margin: 0; } .ezi-stat__sub { color: var(--ezi-muted); font-size: .85rem; margin: 0; } /* ------------------------------ Step ------------------------------------- */ .ezi-step { border-radius: var(--ezi-radius); padding: 32px; color: #fff; height: 100%; } .ezi-step--blue { background: var(--ezi-primary); } .ezi-step--navy { background: var(--ezi-dark); } .ezi-step__number { font-family: var(--ezi-font-heading); font-weight: 800; font-size: 4rem; color: rgba(255,255,255,.5); display: block; line-height: 1; } .ezi-step__title { color: #fff; margin: 8px 0 16px; font-size: 1.5rem; line-height: 1.15; } .ezi-step__text { color: #fff; font-size: .875rem; line-height: 1.7; margin: 0; } /* "How It Works" 4-up cards: progressively darker blue (matches design 85/90/95/100%). */ .ezi-tiles > .wpb_column:nth-child(1) .ezi-step { background: rgba(12,68,153,.85); } .ezi-tiles > .wpb_column:nth-child(2) .ezi-step { background: rgba(12,68,153,.90); } .ezi-tiles > .wpb_column:nth-child(3) .ezi-step { background: rgba(12,68,153,.95); } .ezi-tiles > .wpb_column:nth-child(4) .ezi-step { background: #0c4499; } /* ------------------------------ Image / Badge ---------------------------- */ .ezi-image { margin: 0; } .ezi-image__frame { display: block; width: 100%; border-radius: var(--ezi-radius); background-size: cover; background-position: center; background-color: var(--ezi-light); overflow: hidden; } .ezi-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .ezi-image__ph { display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: linear-gradient(135deg, #2a4a74, #13233c); color: #8aa2c4; font-family: var(--ezi-font-heading); font-weight: 700; letter-spacing: .5px; } .ezi-image--square .ezi-image__frame { border-radius: 0; } /* Square badge: fixed square card (rounded, not circular) showing the full logo. */ .ezi-image--badge { display: flex; flex-direction: column; align-items: center; gap: 12px; } .ezi-image--badge .ezi-image__frame { flex: 0 0 auto; background-size: contain; background-repeat: no-repeat; background-color: #fff; } .ezi-image--badge .ezi-image__ph { background: rgba(255,255,255,.14); color: #fff; font-size: .8rem; } .ezi-image--circle { display: flex; flex-direction: column; align-items: center; gap: 12px; } .ezi-image--circle .ezi-image__frame { border-radius: 50%; flex: 0 0 auto; } .ezi-image--circle .ezi-image__ph { background: rgba(255,255,255,.14); color: #fff; font-size: .8rem; } .ezi-band--blue .ezi-image--circle .ezi-image__ph, .ezi-band--navy .ezi-image--circle .ezi-image__ph { background: rgba(255,255,255,.16); } /* Accreditation badges (Safety section): pack them at the LEFT of the column with a tight gap, instead of spreading evenly across the full column width. Desktop only — the ≤768 rule keeps them evenly sized side by side on mobile. */ @media (min-width: 769px) { .ezi-accred-row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: flex-start; align-items: flex-start; } .ezi-accred-row > .wpb_column { width: auto !important; flex: 0 0 auto; padding-left: 0; padding-right: 0; } .ezi-accred-row .ezi-image--badge { align-items: flex-start; } .ezi-accred-row .ezi-image__frame { width: 130px !important; height: 130px !important; } } .ezi-image__caption { display: block; text-align: center; font-family: var(--ezi-font-heading); font-weight: 600; font-size: .9rem; margin-top: 10px; color: inherit; } /* ------------------------------ CTA -------------------------------------- */ .ezi-cta { display: flex; border-radius: var(--ezi-radius); overflow: hidden; height: 100%; box-shadow: var(--ezi-shadow); } .ezi-cta--blue { background: var(--ezi-primary); color: #fff; } .ezi-cta--navy { background: var(--ezi-dark); color: #fff; } .ezi-cta--light { background: var(--ezi-light); color: var(--ezi-dark); } .ezi-cta__media { flex: 0 0 40%; background-size: cover; background-position: center; min-height: 220px; } .ezi-cta.has-image .ezi-cta__body { flex: 1; } .ezi-cta__body { display: flex; flex-direction: column; gap: 16px; justify-content: center; padding: 40px; } .ezi-cta__logo { max-height: 52px; height: auto; width: auto; max-width: 220px; align-self: flex-start; flex: 0 0 auto; object-fit: contain; } .ezi-cta__title { margin: 0; font-size: 1.5rem; } .ezi-cta--blue .ezi-cta__title, .ezi-cta--navy .ezi-cta__title { color: #fff; } .ezi-cta__text { margin: 0; font-size: .95rem; opacity: .92; } .ezi-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } /* ---- Service boxes on a dark band (e.g. About "Our Values") -------------- Plain white cards, dark text, no red bar. Overrides the band's white-text bleed so the card text isn't white-on-white. */ .ezi-band--blue .ezi-service-box__bar, .ezi-band--navy .ezi-service-box__bar { display: none; } .ezi-band--blue .ezi-service-box .ezi-service-box__title, .ezi-band--navy .ezi-service-box .ezi-service-box__title { color: var(--ezi-heading); } .ezi-band--blue .ezi-service-box .ezi-service-box__text, .ezi-band--navy .ezi-service-box .ezi-service-box__text { color: var(--ezi-muted); } .ezi-band--blue .ezi-service-box .ezi-link, .ezi-band--navy .ezi-service-box .ezi-link { color: var(--ezi-primary); } /* ------------------------------ Timeline --------------------------------- */ .ezi-timeline { width: 100%; } .ezi-timeline__track { display: flex; align-items: flex-start; } .ezi-timeline__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; } .ezi-timeline__year { font-family: var(--ezi-font-body); font-weight: 600; font-size: 16px; color: var(--ezi-dark); } .ezi-timeline__marker { position: relative; width: 100%; height: 22px; display: flex; align-items: center; justify-content: center; margin: 14px 0; } .ezi-timeline__marker::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 3px; transform: translateY(-50%); background: var(--ezi-light); z-index: 0; } .ezi-timeline__item:first-child .ezi-timeline__marker::before { left: 50%; } .ezi-timeline__item:last-child .ezi-timeline__marker::before { right: 50%; } .ezi-timeline__dot { position: relative; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #9fb0c4; } .ezi-timeline__item.is-current .ezi-timeline__dot { width: 18px; height: 18px; background: var(--ezi-primary); box-shadow: 0 0 0 4px rgba(var(--ezi-primary-rgb), .15); } .ezi-timeline__title { font-family: var(--ezi-font-heading); font-weight: 700; font-size: 13px; color: var(--ezi-dark); padding: 0 8px; } .ezi-timeline__text { font-family: var(--ezi-font-heading); font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--ezi-dark); margin-top: 8px; padding: 0 10px; } .ezi-timeline__item.is-current .ezi-timeline__year, .ezi-timeline__item.is-current .ezi-timeline__title { color: var(--ezi-primary); } @media (max-width: 860px) { .ezi-timeline__track { flex-direction: column; align-items: stretch; gap: 4px; } .ezi-timeline__item { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 4px 14px; padding: 10px 0; border-bottom: 1px solid var(--ezi-light); } .ezi-timeline__marker { width: auto; height: auto; margin: 0; } .ezi-timeline__marker::before { display: none; } .ezi-timeline__year { min-width: 48px; } .ezi-timeline__title { padding: 0; } .ezi-timeline__text { flex: 1 1 100%; margin-top: 2px; padding: 0; } } /* ------------------------------ Statement (Vision/Mission) --------------- */ .ezi-statement__label { font-family: var(--ezi-font-heading); font-weight: 800; font-size: 1.5rem; color: var(--ezi-heading); margin: 0 0 16px; } .ezi-statement__body { display: flex; gap: 14px; align-items: flex-start; } .ezi-statement__mark { font-family: Georgia, serif; font-size: 4.25rem; line-height: .8; margin-top: 2px; color: var(--ezi-primary); flex: 0 0 auto; } .ezi-statement__text { margin: 0; font-family: var(--ezi-font-heading); font-weight: 300; color: var(--ezi-dark); font-size: 1rem; line-height: 1.6; } .ezi-band--blue .ezi-statement__label, .ezi-band--navy .ezi-statement__label, .ezi-band--blue .ezi-statement__text, .ezi-band--navy .ezi-statement__text { color: #fff; } .ezi-band--blue .ezi-statement__mark, .ezi-band--navy .ezi-statement__mark { color: #fff; } /* --------------------------- News cards ---------------------------------- */ .ezi-news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 28px; } .ezi-news-grid--cols2 { grid-template-columns: repeat(2, 1fr); } .ezi-news-grid--cols4 { grid-template-columns: repeat(4, 1fr); } /* Space the "View All Articles" button away from the grid. */ .ezi-news-grid ~ .ezi-btn-wrap { margin-top: 36px; } .ezi-news-empty { color: var(--ezi-muted); } /* Global CTA band (rendered above the footer site-wide). */ .ezi-global-cta__grid { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; align-items: stretch; } .ezi-global-cta__grid .ezi-cta { height: 100%; } @media (max-width: 900px) { .ezi-global-cta__grid { grid-template-columns: 1fr; } } .ezi-news-card { background: #fff; border: 1px solid #eef1f5; border-radius: var(--ezi-radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--ezi-shadow); transition: transform .2s, box-shadow .2s; } .ezi-news-card:hover { transform: translateY(-4px); box-shadow: var(--ezi-shadow-lg); } .ezi-news-card__media { display: block; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--ezi-light); } .ezi-news-card__body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .ezi-news-card__title { margin: 0; font-size: 1.15rem; } .ezi-news-card__title a { color: var(--ezi-dark); } .ezi-news-card__title a:hover { color: var(--ezi-primary); } .ezi-news-card__excerpt { color: var(--ezi-muted); font-size: .9rem; margin: 0; } .ezi-news-card .ezi-link { margin-top: auto; } .ezi-news-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; } .ezi-news-cats ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; } .ezi-news-cats a { display: inline-block; padding: 8px 16px; background: var(--ezi-light); border-radius: 99px; font-size: .85rem; font-weight: 600; color: var(--ezi-dark); } .ezi-news-cats a:hover { background: var(--ezi-primary); color: #fff; } .ezi-pagination { margin-top: 40px; } .ezi-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0 12px; border-radius: 8px; background: var(--ezi-light); color: var(--ezi-dark); font-weight: 600; margin: 0 3px; } .ezi-pagination .page-numbers.current, .ezi-pagination .page-numbers:hover { background: var(--ezi-primary); color: #fff; } /* ------------------------------ Article ---------------------------------- */ .ezi-article__inner { max-width: 1100px; margin: 0 auto; } .ezi-article__content { font-size: 1.05rem; line-height: 1.8; color: #26364a; } .ezi-article__content h2, .ezi-article__content h3 { margin-top: 1.6em; } .ezi-article__content blockquote { border-left: 4px solid var(--ezi-accent); margin: 1.6em 0; padding: 4px 0 4px 24px; font-size: 1.2rem; color: var(--ezi-dark); font-style: italic; } .ezi-article__content img { border-radius: var(--ezi-radius); margin: 1.5em 0; } .ezi-related__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; flex-wrap: wrap; gap: 10px; } .ezi-related__head h2 { margin: 0; } /* ------------------------------ Footer ----------------------------------- */ .ezi-footer { background: var(--ezi-footer-bg); color: var(--ezi-footer-text); padding: 88px 0 40px; } .ezi-footer__top { display: grid; grid-template-columns: 360px 1fr; gap: 64px; } .ezi-footer__logocard { background: rgba(255,255,255,.85); border-radius: var(--ezi-radius); padding: 16px 24px; display: inline-flex; align-items: center; height: 80px; box-shadow: 0 10px 24px rgba(0,0,0,.15); } .ezi-footer__logocard img { max-height: 46px; max-width: 220px; width: auto; height: auto; object-fit: contain; } .ezi-footer__family { margin-top: 24px; } .ezi-footer__family-label { font-family: var(--ezi-font-heading); font-weight: 700; margin: 0 0 12px; } .ezi-footer__family-logos { max-height: 50px; width: auto; } .ezi-footer__family-brands { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; } .ezi-footer__family-brand { display: inline-flex; align-items: center; } .ezi-footer__family-brand[href] { transition: opacity .15s ease; } .ezi-footer__family-brand[href]:hover { opacity: .75; } .ezi-footer__family-logo { max-height: 46px; width: auto; display: block; } .ezi-footer__cols { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 40px; } .ezi-footer__col h4 { color: #fff; font-family: var(--ezi-font-heading); font-weight: 700; font-size: 1rem; margin: 0 0 16px; } .ezi-footer__connect { margin-top: 24px; } .ezi-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .ezi-footer__menu a { color: rgba(255,255,255,.82); font-weight: 300; } .ezi-footer__menu a:hover { color: #fff; } .ezi-footer__contact p { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.85); margin: 0 0 12px; font-weight: 300; } .ezi-footer__contact a { color: rgba(255,255,255,.85); } .ezi-footer__contact a:hover { color: #fff; } .ezi-footer__contact .ezi-icon { flex: 0 0 auto; margin-top: 3px; } .ezi-socials { display: flex; gap: 10px; } .ezi-socials a { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ezi-primary); display: grid; place-items: center; transition: background .15s ease, color .15s ease; } .ezi-socials a:hover { background: #eef2fb; color: var(--ezi-primary); } .ezi-footer__divider { height: 1px; background: rgba(255,255,255,.2); margin: 48px 0 24px; } .ezi-footer__bottom { display: flex; justify-content: space-between; gap: 16px; color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 300; flex-wrap: wrap; } /* --------------------------- WPBakery admin icon ------------------------- */ .vc_element-icon.ezi-vc-icon, .ezi-vc-icon { background-image: none !important; background: var(--ezi-primary) !important; border-radius: 4px; position: relative; } .vc_element-icon.ezi-vc-icon::after { content: "EZI"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; font-weight: 800; } /* ------------------------------ Responsive ------------------------------- */ @media (max-width: 1200px) { :root { --ezi-gutter: 40px; --ezi-section-y: 72px; } .ezi-footer__top { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 1024px) { .ezi-news-grid { grid-template-columns: repeat(2, 1fr); } .ezi-footer__cols { grid-template-columns: 1fr 1fr; } .ezi-navbar__menu { display: none; } .ezi-navbar__toggle { display: inline-flex; } .ezi-navbar__cta { display: none; } /* Push the hamburger to the far right once the desktop menu is hidden. */ .ezi-navbar__actions { margin-left: auto; } } @media (max-width: 768px) { :root { --ezi-gutter: 20px; --ezi-section-y: 56px; } .ezi-hero--h-tall, .ezi-hero--h-medium { min-height: 520px; padding: 150px 0 60px; } .ezi-cta { flex-direction: column; } .ezi-cta__media { flex-basis: auto; width: 100%; } .ezi-news-grid { grid-template-columns: 1fr; } .ezi-footer__cols { grid-template-columns: 1fr; } .ezi-footer__bottom { flex-direction: column; gap: 6px; } .ezi-hero__actions .ezi-btn { flex: 1 1 auto; } /* Smaller logo + tighter navbar on phones. */ .ezi-navbar { height: 62px; padding: 0 12px 0 16px; } .ezi-navbar__logo img { max-height: 34px; } /* "Our Fleet" stats -> 2x2 grid. */ .ezi-stats-row.vc_row { display: flex; flex-wrap: wrap; row-gap: 30px; } .ezi-stats-row > .wpb_column { width: 50% !important; flex: 0 0 50%; } /* Safety accreditation badges -> side by side. */ .ezi-accred-row { display: flex !important; flex-wrap: nowrap; gap: 12px; align-items: flex-start; } .ezi-accred-row > .wpb_column { width: 33.33% !important; flex: 1 1 0; min-width: 0; } .ezi-accred-row .ezi-image { align-items: center; } .ezi-accred-row .ezi-image__frame { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; } } /* --------------------------------------------------------------------------- Contact Form 7 forms (Get a Quote + Contact) --------------------------------------------------------------------------- */ /* Full-bleed light background (the row is boxed, so a ::before paints edge-to-edge, matching the theme's .ezi-band technique). */ .ezi-quote-section { position: relative; z-index: 0; } .ezi-quote-section > * { position: relative; z-index: 1; } .ezi-quote-section::before, .vc_row.ezi-quote-section::before, .wpb_row.ezi-quote-section::before { content: "" !important; display: block !important; position: absolute !important; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: 0; clear: none; background: var(--ezi-light); } .ezi-quote-section .vc_column-inner { height: 100%; } .ezi-quote__title { font-family: var(--ezi-font-heading); font-size: 1.75rem; line-height: 1.15; color: var(--ezi-heading); margin: 0 0 8px; } .ezi-quote__lead { color: var(--ezi-muted); margin: 0 0 22px; font-size: 1rem; } /* Form card */ .ezi-quote__form-col .wpcf7, .ezi-contact-form-section .wpcf7 { background: #fff; border: 1px solid rgba(13,27,46,.08); border-radius: 16px; padding: 30px; box-shadow: var(--ezi-shadow); } .ezi-contact-form-section { background: #fff; } .ezi-contact-form-section .ezi-quote__title, .ezi-contact-form-section .ezi-quote__lead { text-align: center; } .ezi-contact-form-section .wpcf7 { max-width: 860px; margin: 24px auto 0; } /* Field grid */ .ezi-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .ezi-form-grid .ezi-field { margin: 0; } .ezi-form-grid .ezi-field--full { grid-column: 1 / -1; } .ezi-form-grid label { display: block; font-family: var(--ezi-font-heading); font-weight: 600; font-size: .82rem; letter-spacing: .2px; color: var(--ezi-heading); } /* Inputs */ .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form select, .wpcf7-form textarea { width: 100%; margin-top: 6px; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--ezi-text); background: #fff; border: 1px solid rgba(13,27,46,.18); border-radius: 10px; transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box; } .wpcf7-form textarea { resize: none; min-height: 120px; } /* CF7 wraps each control in an inline span; make it a full-width block so the control (select / textarea / input) stretches to the field width. */ .wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; } .wpcf7-form select { appearance: none; -webkit-appearance: none; background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 38px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230d1b2e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); cursor: pointer; } .wpcf7-form input:not([type=submit]):focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--ezi-primary); box-shadow: 0 0 0 3px rgba(var(--ezi-primary-rgb), .15); } .wpcf7-form ::placeholder { color: #9aa7b8; } /* Custom styled dropdown (JS enhances the CF7