/* ========================================================= IRC ENGINEERING SERVICES — ported from the agency HTML demo (https://omlogic.in/demo/irc-engineering-services/css/style.css) ========================================================= */ :root { --red: #DE0011; --red-dark: #B5000E; --ink: #1C1C1C; --gray-text: #666666; --gray-mid: #8A8A8A; --light-bg: #F5F6F8; --gray-bg: #EFEFEF; --yellow-badge: #FFDAA3; --dark: #000000; --border-soft: #E3E3E3; --font-head: 'Inter', sans-serif; --font-body: 'Inter', sans-serif; --radius-lg: 16px; --radius-md: 10px; --page-hero-h: 260px; /* inner-page banner height — ONE value for every page (services + About); 260px = the services banner's original height */ } /* Remove Astra's default page-content gap above the Elementor-built front page, and above every other full-bleed "rich design" page (Services, service landing pages, ...) whose own hero shortcode replaces Astra's title bar — see irc_is_full_bleed_page(). */ .home #primary, .home #main, .home .ast-container, .irc-full-bleed #primary, .irc-full-bleed #main, .irc-full-bleed .ast-container { padding-top: 0 !important; margin-top: 0 !important; } .home .site-content, .irc-full-bleed .site-content { padding-top: 0 !important; } /* `overflow-x: clip` kills sideways scrolling WITHOUT creating a scroll container, so position:sticky (the header) keeps working — `overflow:hidden` on body would break it. Needed because Bootstrap's .row negative-margin gutters and Owl Carousel's internal (intentionally oversized) stage both bleed past the viewport edge on narrow screens. */ html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Overrides Astra's own Customizer typography setting, which otherwise controls body text (nothing in this file was actually applying --font-body to anything before this). */ body { max-width: 100%; overflow-x: hidden; overflow-x: clip; font-family: var(--font-body); } /* Elementor's global kit CSS sets its own explicit font-family directly on .elementor-heading-title (falling back to plain "Sans-serif" since the kit's own --e-global-typography-primary-font-family variable is never actually defined) — a direct declaration on the element beats the inherited value from body regardless of specificity, so every converted heading was silently rendering in the browser's default sans-serif instead of Inter. Forcing it directly, site-wide. */ .elementor-heading-title { font-family: var(--font-head) !important; } /* h3/h4/h5 deliberately excluded: they're reused inside components that need a non-default color (white service/blog titles on dark overlays, white footer headings on black, etc.) and must be set explicitly per-component instead of via this blanket rule — otherwise this !important wins ties against equally-specific component rules by source order, which is exactly the bug that hit service-card titles and (again) the footer headings. */ body.home h1, body.home h2, body.home .brand-text { font-family: var(--font-head); color: var(--ink) !important; font-weight: 700; letter-spacing: -0.01em; } /* Same heading treatment as the home page (font, weight, tracking, ink color), extended to every other "rich design" page (Services, service landing pages, ...) via the shared .irc-full-bleed body class — home itself is untouched, still governed solely by the rule above. Deliberately NOT !important (unlike the home rule): component-level overrides for headings on colored backgrounds (.svc-section--dark .section-title, .svc-section--brand .section-title, .page-hero-title) use 2+ classes, so they still win on real specificity without needing an !important arms race — see the history of that bug recurring on this site. */ .irc-full-bleed h1, .irc-full-bleed h2 { font-family: var(--font-head); color: var(--ink); font-weight: 700; letter-spacing: -0.01em; } /* h3/h4 too (card titles etc.) — placed here at the top of the file, same as the rule above, so every later component-specific color (dark sections, red credential band, white service-card text, ...) naturally wins on source order without an !important fight, since those all come further down this stylesheet. */ .irc-full-bleed h3, .irc-full-bleed h4 { font-family: var(--font-head); color: var(--ink); } .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev, .owl-carousel button.owl-dot { border: #fff solid 1px !important; } .eyebrow { display: flex; align-items: center; gap: 0px; text-transform: uppercase; font-size: .9rem; font-weight: 500; letter-spacing: .05em; color: var(--red); margin-bottom: .9rem; } .eyebrow-light { color: rgba(255,255,255,.9); } /* !important on font-size/line-height: same Elementor global-default conflict as .hero-title — `.elementor-widget-heading h2.elementor-heading-title{line-height: 1.3em}` has higher specificity (2 classes + element) and loads later. Since .section-title is the shared H2 class across every converted section on every service page, this one fix corrects all of them at once. */ .section-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem) !important; line-height: 1.1 !important; margin-bottom: 1.1rem; font-weight: 600; } /* Native Elementor heading widgets carry .section-title on the WIDGET WRAPPER, not the actual

— so the rule above only reaches the h2 by inheritance, and Elementor's own global Kit typography sets font-size directly on .elementor-heading-title (h2{font-size:1.875rem}), which as a direct declaration beats any inherited value regardless of !important on the ancestor. Same root cause as the color bugs elsewhere; this targets the h2 directly instead. margin-bottom needs the same direct targeting for an even more basic reason: margin isn't an inherited CSS property at all, so the wrapper's margin-bottom above never reached the h2 to begin with — and Elementor's own Kit CSS sets margin:0 directly on .elementor-heading-title, collapsing the gap to the widget below it entirely once flex_gap is zeroed on the parent container. */ .section-title .elementor-heading-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem) !important; line-height: 1.1 !important; margin-bottom: 1.1rem !important; } .section-text { color: var(--ink); font-size: 1rem; line-height: 1.75; margin-bottom: 1.6rem; } .link-arrow { color: var(--red); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; text-decoration: none !important; } .link-arrow:hover { color: var(--red-dark); } .link-arrow i { transition: transform .25s ease; } .link-arrow:hover i { transform: translate(3px, -3px); } /* ---------- Buttons ---------- */ .btn-red-pill, .btn-light-pill, .btn-outline-pill { display: inline-block; padding: .85rem 1.9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; border: 2px solid transparent; transition: all .25s ease; position: relative; overflow: hidden; text-decoration: none !important; } body.home a, body.home a:hover { text-decoration: none !important; } .btn-red-pill { background: var(--red); color: #fff; border-color: var(--red); } .btn-red-pill:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; } .btn-light-pill { background: #fff; color: var(--ink); border-color: #fff; } .btn-light-pill:hover { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-outline-pill { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); } .btn-outline-pill:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-red-pill::before, .btn-light-pill::before, .btn-outline-pill::before { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .6s ease; pointer-events: none; } .btn-red-pill:hover::before, .btn-light-pill:hover::before, .btn-outline-pill:hover::before { left: 140%; } /* ---------- Topbar ---------- */ .topbar { background: #fff; color: var(--ink); font-size: .82rem; padding: 8px 0; } .topbar a { color: var(--ink); } .topbar a:hover { color: var(--red); } .topbar-contacts a { margin-right: 6px; } .topbar-divider { display: inline-block; width: 1px; height: 12px; background: rgb(195 195 195); margin: 0 8px; vertical-align: middle; } .topbar-social a { margin-left: 13px; font-size: 1rem; } .topbar-right { display: flex; align-items: center; gap: 22px; } .topbar-cta.btn-red-pill { padding: .38rem .95rem; font-size: .76rem; background: #fff; color: var(--red); border-color: var(--red); } .topbar-cta.btn-red-pill:hover { background: #fff; color: var(--red-dark); border-color: var(--red-dark); } /* ---------- Main navbar ---------- */ .main-nav { background: #fff; padding: 14px 0; box-shadow: 0 2px 18px rgba(0,0,0,.06); z-index: 1030; transition: padding .25s ease, box-shadow .25s ease; } .main-nav.is-scrolled { padding: 8px 0; box-shadow: 0 8px 28px rgba(0,0,0,.12); } .main-nav.is-scrolled .brand img { height: 36px; } .brand { display: flex; align-items: center; gap: 12px; } .brand img { height: 42px; width: auto; max-width: 250px; object-fit: contain; transition: height .25s ease; } .main-menu { gap: 2px; } .main-menu .nav-link { color: var(--ink); font-weight: 600; font-size: .95rem; padding: 10px 18px; position: relative; } /* WP puts current-menu-item/current_page_item on the
  • , not the , so the active color has to key off the ancestor — a bare `.nav-link.current-menu-item` never matches. */ .main-menu .nav-link:hover, .main-menu .nav-link.active, .main-menu li.current-menu-item > .nav-link, .main-menu li.current_page_item > .nav-link, .main-menu li.current-menu-ancestor > .nav-link, .main-menu li.current-menu-parent > .nav-link, .main-menu li.current_page_ancestor > .nav-link, .main-menu li.current_page_parent > .nav-link { color: var(--red) !important; } .nav-actions { gap: 16px; display: flex; align-items: center; } .nav-actions .btn-red-pill { padding: .6rem 1.5rem; white-space: nowrap; } /* ---------- Dropdown submenu (e.g. Resources) ---------- */ .main-menu > .menu-item-has-children { position: relative; } .main-menu .menu-item-has-children .ast-menu-toggle { display: none; } /* Astra's own theme CSS injects this arrow (absolutely positioned, flush right) only for items WordPress itself recognizes as having children (Resources) — not for Services, whose "children" only exist via our mega-menu plugin. That mismatch is exactly why the two arrows looked inconsistent. Hiding Astra's version and relying solely on our own ::after chevron below makes every dropdown trigger behave identically. */ .main-menu .ast-header-navigation-arrow { display: none !important; } /* Arrow: thin chevron (not Bootstrap's bold triangle) so every dropdown trigger in the nav — single-level or the Services mega menu — matches the same light, modern look. */ .main-menu .dropdown-toggle::after { display: inline-block; content: ""; width: 7px; height: 7px; margin-left: 6px; margin-bottom: 1px; vertical-align: middle; border: 0; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--gray-mid, #8a8a8a); transform: rotate(45deg); transition: transform .25s ease, color .2s ease; } .main-menu > .menu-item-has-children:hover > .dropdown-toggle::after, .main-menu > .menu-item-has-children:focus-within > .dropdown-toggle::after, .mega-dropdown:hover > .dropdown-toggle::after, .mega-dropdown:focus-within > .dropdown-toggle::after, .mega-dropdown.open > .dropdown-toggle::after { transform: rotate(225deg); color: var(--red); } /* Nested items (e.g. Resources > Insights > Test) aren't independently toggled — see below — so they get no arrow. */ .main-menu .sub-menu .dropdown-toggle::after { display: none; } .main-menu > .menu-item-has-children > .sub-menu { list-style: none; margin: 10px 0 0; padding: 10px; position: absolute; top: 100%; left: 0; min-width: 210px; background: #fff; border-radius: var(--radius-md, 12px); box-shadow: 0 20px 45px rgba(0,0,0,.16); border: 1px solid var(--border-soft, #eee); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; z-index: 1050; } /* `visibility` (not pointer-events) gates interactivity here: with a transition on visibility, the browser keeps it "visible" (hoverable) through the whole close animation and only flips to hidden at the very end — that's what lets the mouse travel Resources link -> gap -> panel without :hover dropping mid-transit and permanently locking the panel out via pointer-events. */ .main-menu > .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .main-menu > .menu-item-has-children:hover > .sub-menu, .main-menu > .menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* See site.js suppressHoverBriefly(): the sticky header compacting on scroll shifts this whole row upward, which can leave a stationary cursor newly hovering a dropdown trigger with no real mouse movement. This class is applied for ~400ms at the exact moment that shift happens, forcing any hover-open dropdown closed through that window. */ body.suppress-hover-open .main-menu > .menu-item-has-children:hover > .sub-menu, body.suppress-hover-open .main-menu > .menu-item-has-children:focus-within > .sub-menu { opacity: 0 !important; visibility: hidden !important; transform: translateY(10px) !important; } .main-menu .sub-menu li { list-style: none; } .main-menu .sub-menu li + li { margin-top: 2px; } .main-menu .sub-menu .nav-link { display: block; padding: 10px 14px !important; border-radius: 8px; font-weight: 600; font-size: .9rem; color: var(--ink); white-space: nowrap; } .main-menu .sub-menu .nav-link:hover { background: var(--light-bg, #f6f6f6); color: var(--red) !important; } /* Any menu item nested inside the panel that itself has children (a 3rd label level) renders as a static indented group rather than a flyout — keeps it simple and never overflows the viewport edge, however many labels get added. */ .main-menu .sub-menu .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; margin: 4px 0 6px; padding: 0 0 0 14px; border-left: 2px solid var(--border-soft, #eee); } .main-menu .sub-menu .sub-menu::before { display: none; } @media (min-width: 992px) and (max-width: 1199.98px) { .main-menu .nav-link { padding: 10px 12px; font-size: .88rem; } .nav-actions .btn-red-pill { padding: .55rem 1.1rem; font-size: .72rem; } } @media (max-width: 991.98px) { /* Outer mobile nav: full-screen slide-in from the left, same treatment as the mega-menu's own slide-in panel below, so the two nest consistently. Bootstrap's own `.navbar-collapse:not(.show){display:none}` at this breakpoint is overridden to `block` so the panel can transition via transform instead of appearing/vanishing. */ .navbar-collapse { display: block !important; position: fixed; inset: 0; width: 100%; height: 100%; background: #fff; z-index: 1900; transform: translateX(-100%); transition: transform .3s ease; overflow-y: auto; padding: 0 20px 24px; } .navbar-collapse.show { transform: translateX(0); } .mobile-nav-bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--border-soft, #e3e3e3); position: sticky; top: 0; background: #fff; z-index: 2; margin-bottom: 8px; } .mobile-nav-title { font-weight: 700; font-size: 1.05rem; } .mobile-nav-bar button { background: none; border: none; font-size: 22px; color: var(--ink); padding: 4px; } .navbar-collapse .main-menu { flex-direction: column; align-items: stretch; gap: 0; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; } /* More prominent mobile list: bigger type, full-bleed tap targets, row dividers — scoped to .navbar-collapse only, so the desktop horizontal nav is untouched. */ .navbar-collapse .main-menu .nav-link { padding: 16px 4px !important; font-size: 1.1rem !important; font-weight: 700; border-bottom: 1px solid var(--border-soft, #e3e3e3); } /* Push the arrow flush to the right edge of the row for BOTH Resources and Services, instead of it sitting immediately after the (variable-length) label text. */ .navbar-collapse .main-menu > .menu-item-has-children > .nav-link, .navbar-collapse .main-menu > .mega-dropdown > .nav-link { display: flex; align-items: center; justify-content: space-between; } .navbar-collapse .main-menu > li:last-of-type > .nav-link { border-bottom: none; } .navbar-collapse .nav-actions { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 12px; } .navbar-collapse .nav-actions .btn-red-pill { text-align: center; padding: 14px; font-size: .9rem; } /* Resources (and any future simple dropdown): tap-to-expand accordion instead of hover. Only the top-level toggle collapses — nested labels (e.g. Insights > Test) stay statically shown underneath it, same as desktop. */ .navbar-collapse .main-menu > .menu-item-has-children > .sub-menu::before { display: none; } .navbar-collapse .main-menu > .menu-item-has-children > .sub-menu { position: static; opacity: 1; visibility: visible; transform: none; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; padding: 0; margin: 0; max-height: 0; overflow: hidden; transition: max-height .3s ease; } .navbar-collapse .main-menu > .menu-item-has-children.sub-menu-open > .sub-menu { max-height: 1000px; } .navbar-collapse .main-menu .sub-menu .nav-link { padding: 14px 4px 14px 20px !important; font-size: 1rem !important; font-weight: 600 !important; border-bottom: 1px solid var(--border-soft, #e3e3e3) !important; } .navbar-collapse .main-menu .sub-menu .sub-menu .nav-link { padding-left: 34px !important; font-size: .95rem !important; } .navbar-collapse .main-menu > .menu-item-has-children.sub-menu-open > .dropdown-toggle::after { transform: rotate(225deg); color: var(--red); } } .icon-btn, .icon-btn:hover, .icon-btn:focus, .icon-btn:active, .icon-btn:focus-visible { padding: 10px; border: 0; background: #fff !important; color: var(--ink) !important; display: inline-flex; align-items: center; justify-content: center; margin-left: 14px; box-shadow: none !important; outline: none !important; } .icon-btn:hover, .icon-btn:hover i { color: var(--red) !important; } .icon-btn i { font-weight: 700; font-size: 20px; } /* ---------- Header search ---------- */ /* Anchored to the icon's own right edge (not .nav-actions or the container), and — unlike the hover-triggered mega/sub menus — this opens on click, so it doesn't need the hover-bridge gap; a small fixed offset keeps it visually attached to the icon. */ .nav-search { position: relative; } .nav-search-panel { position: absolute; top: 100%; right: -10px; margin-top: 10px; width: 320px; display: flex; gap: 8px; background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 10px; box-shadow: 0 20px 45px rgba(0,0,0,.16); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; z-index: 1060; } .nav-search.is-open .nav-search-panel { opacity: 1; visibility: visible; transform: translateY(0); } /* Matches #enquiryForm .form-control exactly (same pill shape/padding/focus ring) so the header search field looks like it belongs to the same design system as the contact form. */ .nav-search-input { flex: 1 1 auto; min-width: 0; background: var(--light-bg); border: none; border-radius: 50px; padding: .7rem 1.3rem; font-size: .92rem; font-family: inherit; color: var(--ink); outline: none; transition: box-shadow .2s ease; -webkit-appearance: none; appearance: none; } .nav-search-input:focus { box-shadow: none; } .nav-search-input::placeholder { color: #000; opacity: 1; } .nav-search-input::-webkit-search-cancel-button, .nav-search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .nav-search-submit { flex: 0 0 auto; width: 38px; padding: 0 25px 0; border: 0; border-radius: 8px; background: #222222; color: #fff; display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .nav-search-submit:hover { background: #000000; } @media (max-width: 767.98px) { .brand img { height: 34px; max-width: 100%; } .main-nav.is-scrolled .brand img { height: 30px; } } .navbar-toggler { background: #fff !important; border: 1.5px solid var(--border-soft, #e3e3e3) !important; border-radius: 8px !important; width: 38px; height: 34px; display: flex; align-items: center; justify-content: center; box-shadow: none !important; transition: transform .15s ease, border-color .2s ease; } .navbar-toggler:hover { border-color: var(--ink) !important; } .navbar-toggler:active { transform: scale(.94); } .navbar-toggler:focus { box-shadow: none !important; } .navbar-toggler i { color: var(--ink); font-size: 18px; } /* ---------- Hero ---------- */ /* !important throughout: Elementor's own Container element defaults (position, inset, overflow, padding) conflict at equal CSS specificity with these theme rules and load later — learned the hard way converting the service pages' identical .page-hero pattern. Applying it proactively here instead of after the fact. */ /* Standard Home spacing: 50px top and bottom (was clamp(90px,12vw,100px) top / 70px bottom). */ .hero { position: relative !important; color: #fff; overflow: hidden !important; padding-top: 50px !important; padding-bottom: 50px !important; } .hero-bg { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; overflow: hidden; z-index: 0; } /* The video's actual containing block is its Elementor widget-wrapper div, not .hero-bg directly — so that wrapper needs its own inset:0 first (previously it had no explicit size, sized only by its child; once the video below is pulled out of flow that wrapper collapses to 0 height, hiding the video entirely — the bug hit when .hero-video was first tried as position:absolute on its own without this). */ .hero-bg .elementor-widget-html { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } /* Plain 100%/100% now resolves correctly since its immediate parent (the wrapper above) has a definite, non-collapsing size — this is what actually fixes the mobile short-video bug, without the position:absolute detour that broke rendering entirely on both mobile and desktop. */ .hero-video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } .hero-overlay { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; background: linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.35) 35%, rgba(5,5,5,.85) 100%); z-index: 1; } .hero-main, .hero-stats { position: relative !important; z-index: 2; } .hero-content .eyebrow { animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) both; } /* !important on font-size/line-height: Elementor has a GLOBAL default `.elementor-widget-heading h1.elementor-heading-title{line-height:1.4em}` — two classes + element = higher specificity than this single-class rule, and it also loads later, so it wins without !important. */ .hero-title { animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .12s; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem) !important; line-height: 1.12 !important; margin-bottom: 1rem; } .hero-text { animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .24s; color: rgba(255,255,255,.85) !important; max-width: 560px; font-size: 1rem; line-height: 1.7; margin-bottom: 1.8rem; } body.home .hero-title, body.home .hero .section-title, body.home .industries-banner .section-title.text-white { color: #fff !important; } /* Direct rule on the h1 itself, not relying on inheritance from the wrapper above: Elementor's global kit CSS sets an explicit (non-inherited) color directly on .elementor-heading-title — a direct declaration on the element always beats an inherited value from an ancestor regardless of !important on that ancestor, so the rule above alone wasn't enough. This one targets the h1's own color directly. */ .hero-title .elementor-heading-title { color: #fff !important; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem) !important; line-height: 1.12 !important; margin-bottom: 1rem !important; } /* Same direct-declaration-beats-inheritance issue as the hero title above, this time for the Industries banner heading (dark background, needs white text). */ .industries-banner .elementor-heading-title { color: #fff !important; } .hero-buttons { animation: heroFadeUp .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: .36s; display: flex; gap: 16px; flex-wrap: wrap; } @keyframes heroFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .hero-stats { margin-top: 60px; width: 100%; } /* !important on margin-left: Elementor's base .e-con class has its own built-in fallback (margin-left: var(--margin-left, 0px)) that forces 0 even with no explicit per-element override from us — same class of conflict as everywhere else, just via a hardcoded fallback instead of an explicit setting this time. */ /* !important across the board here: Elementor's base .e-con class has its own built-in fallbacks for border-radius (0), border (none), and overflow (visible) — same conflict as margin-left above, just on more properties at once. Fixing them all together instead of finding each one individually. */ .stats-row { background: rgba(6,6,6,.5) !important; backdrop-filter: blur(4px); border-radius: var(--radius-md) !important; margin-left: auto !important; max-width: 560px !important; overflow: hidden !important; border: 1px solid rgb(255 255 255 / 25%) !important; } /* Elementor wraps the widget's raw HTML in its own container div, which sits between .stats-row and the .col-4 items — breaking Bootstrap's row/col flex relationship (columns need to be DIRECT flex children of .row to sit side by side). Forcing that specific wrapper to be flex too, matching Bootstrap's own .row behavior. */ .stats-row .elementor-widget-html { display: flex; width: 100%; } .stat-item { text-align: center; padding: 18px 8px; border-right: 1px solid rgba(255,255,255,.14); flex: 1 1 0; } .stat-item:last-child { border-right: none; } .stat-number { font-family: var(--font-head); font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem); font-weight: 600; color: #fff; display: block; margin-bottom: 2px; } .stat-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: #fff; font-weight: normal; white-space: nowrap; } /* Mobile only: "Client Satisfaction" (the longest label) has no room to stay on one line inside its third of a 3-up row at phone widths — white-space:nowrap above was letting it spill past the stat box's own edge instead of wrapping. Desktop/tablet keep the single-line nowrap treatment untouched. */ @media (max-width: 575.98px) { .stat-item { padding: 14px 6px; } .stat-label { white-space: normal; font-size: .62rem; line-height: 1.3; } .hero-buttons { gap: 10px; margin-bottom: 28px; } } /* ---------- About ---------- */ /* !important: same Elementor base-container padding conflict as everywhere else. Home spacing rule: every section below the hero has 50px top and bottom (same as the About page). */ .about-section { padding: 50px 0 !important; } .about-collage { position: relative; padding: 10px 30px 30px 0; } .collage-dots { position: absolute; top: -20px; left: -10px; width: 120px; height: 120px; background-image: radial-gradient(var(--red) 1.6px, transparent 1.6px); background-size: 12px 12px; opacity: .35; z-index: 0; } .collage-main { border-radius: var(--radius-lg); width: 78%; position: relative; z-index: 1; box-shadow: 0 20px 45px rgba(0,0,0,.15); } .collage-small { position: absolute; border-radius: var(--radius-md); border: 6px solid #fff; box-shadow: 0 15px 30px rgba(0,0,0,.18); z-index: 2; } .collage-small-1 { width: 46%; bottom: 0; left: 0; } .collage-small-2 { width: 32%; top: 0; right: 0; } .collage-small-3 { width: 32%; top: 38%; right: 0; } .about-collage img, .why-image-wrap > img { transition: transform .5s ease, box-shadow .5s ease; } .about-collage img:hover, .why-image-wrap > img:hover { transform: translateY(-6px) scale(1.01); box-shadow: 0 30px 60px rgba(0,0,0,.22); } /* ---------- Services ---------- */ .services-section { background: var(--light-bg); padding: 0px 0 !important; } .services-flex { display: flex; align-items: stretch; gap: 30px; } .services-turbine { flex: 0 0 20%; max-width: 20%; display: none; position: relative; } /* Absolutely positioned so it fills the column top to bottom: the column is only as tall as the text beside it (a flex item with no set height), so a plain height:100% on the image had nothing to measure against and the photo stopped at its own proportions, short of the section's bottom edge. */ /* Extra class in the selector: Elementor's ".elementor img { height: auto }" has the same specificity and loads later. */ .services-section .services-turbine img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; display: block; } /* The section itself is 0 so the turbine photo runs the full height; the 50px top/bottom lives here. */ .services-content { flex: 1 1 auto; min-width: 0; padding: 50px 0; } @media (min-width: 992px) { .services-turbine { display: block; } } .services-carousel-wrap { position: relative; } .services-owl .service-card { margin: 4px 2px 10px; position: relative; } .services-owl .owl-stage-outer { overflow: hidden; padding-top: 4px; } .services-owl .owl-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .services-owl .owl-dot span { width: 8px; height: 8px; margin: 0; border-radius: 50%; background: var(--border-soft); display: block; transition: background .2s ease, transform .2s ease; } .services-owl .owl-dot.active span, .services-owl .owl-dot:hover span { background: var(--red); transform: scale(1.2); } .service-card { position: relative; background: #fff; border-radius: var(--radius-lg); overflow: hidden; height: 100%; box-shadow: 0 10px 30px rgba(0,0,0,.05); transition: transform .3s ease, box-shadow .3s ease; } .service-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.1); } .service-card img { width: 100%; aspect-ratio: 6 / 8; object-fit: cover; position: relative; z-index: 0; transition: transform .7s cubic-bezier(.2,.8,.2,1); will-change: transform; } .service-card:hover img { transform: scale(1.08); } .service-card::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 35%, rgba(0,0,0,.05) 70%, rgba(0,0,0,0) 100%); } .service-card-body { padding: 22px 24px 26px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; } .service-card-body h3 { color: #fff !important; font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 10px; font-weight: 500; } .service-divider { display: block; width: 34px; height: 3px; background: #fff; margin-bottom: 12px; } .service-card-body p { color: rgba(255,255,255,.85); font-size: .9rem; margin-bottom: 0; } @media (max-width: 991px) { .services-flex { flex-direction: column; } .services-turbine { max-width: 100%; width: 100%; height: 220px; } } /* ---------- Why choose us ---------- */ .why-section { padding: 50px 0 !important; } .reason-list { margin-top: 2rem; } .reason-item { display: flex; align-items: center; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--border-soft); } .reason-item:first-child { padding-top: 0; } .reason-item:last-child { border-bottom: none; padding-bottom: 0; } .reason-icon { flex: 0 0 78px; width: 78px; height: 78px; border-radius: 50%; background: var(--light-bg); border: 2px solid var(--red); color: var(--ink); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.7rem; line-height: 1; transition: transform .3s ease, box-shadow .3s ease; } .reason-item:hover .reason-icon { transform: scale(1.08) rotate(-4deg); box-shadow: 0 10px 24px rgba(222,0,17,.35); } .reason-icon img { width: 34px; height: 34px; object-fit: contain; filter: brightness(0); } .reason-title { flex: 0 0 170px; padding-top: 4px; } .reason-title h4 { color: var(--ink) !important; font-family: var(--font-head); font-size: 1.3rem; margin-bottom: 0; line-height: 1.4; font-weight: 600; } .reason-desc { flex: 1 1 auto; min-width: 0; padding-top: 4px; } .reason-desc p { color: var(--ink); font-size: .92rem; margin-bottom: 0; line-height: 1.6; } @media (max-width: 767.98px) { .reason-item { flex-wrap: wrap; row-gap: 8px; } .reason-title { flex: 1 1 auto; padding-top: 8px; } .reason-desc { flex: 1 1 100%; padding-top: 0; } } .why-image-wrap { position: relative; display: flex; justify-content: center; } /* overflow:hidden scoped to this inner wrapper only, NOT .why-image-wrap itself — the .happy-badge is a sibling that intentionally floats partially below the image's bottom edge (bottom:-28px by design); clipping the outer wrapper cut that off. */ .why-image-inner { border-radius: var(--radius-lg); overflow: hidden; width: 100%; } .why-image-wrap img { border-radius: var(--radius-lg) !important; width: 100%; aspect-ratio: 5 / 7; object-fit: cover; box-shadow: 0 20px 45px rgba(0,0,0,.15); display: block; } .happy-badge { position: absolute; right: 24px; bottom: -28px; background: var(--yellow-badge); border-radius: var(--radius-md); padding: 20px 30px; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.15); text-align: center; } .happy-avatars { display: flex; align-items: center; justify-content: center; } /* flex-shrink:0 + !important: inside .happy-avatars' flex row these were being squeezed narrower than their fixed height by flex's default shrink behavior, turning the border-radius:50% circles into ovals. */ .happy-avatars img { width: 34px !important; height: 34px !important; flex: 0 0 34px; border-radius: 50% !important; border: 2px solid var(--yellow-badge); margin-left: -10px; object-fit: cover; } .happy-avatars img:first-child { margin-left: 0; } .happy-avatars-more { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; background: var(--ink); color: #fff; font-size: .8rem; display: flex; align-items: center; justify-content: center; margin-left: -10px; border: 2px solid var(--yellow-badge); } .happy-text { display: flex; flex-direction: column; line-height: 1.2; } .happy-text strong { font-size: 1.6rem; font-family: var(--font-head); } .happy-text span { font-size: 1rem; color: var(--ink); padding: 4px 0 7px; } /* ---------- Industries banner ---------- */ .industries-banner { background: #222222; padding: 50px 0 !important; color: #fff; } /* Nav arrows used to be a flex SIBLING of .owl-stage-outer inside this same flex row — Owl sizes its items against #industriesTrack's own full width, then CSS flex-shrink independently squeezes .owl-stage-outer to make room for the nav, AFTER Owl already committed to item widths sized for the full (unshrunk) width — so items ended up too wide and the last one bled/clipped past the visible edge. Reserving the nav's space with padding instead (and taking the nav out of flow via absolute positioning) means Owl's own width measurement already reflects the true available space, so items fit exactly. */ /* The text column's heading now wraps to 3 lines, making the row taller than the 132px boxes need — with the row's align-items:flex-start (needed so the eyebrow lines up with the box tops), the extra height sits entirely below the boxes, leaving noticeably more gap under them than above. Centering just this column (not the whole row) within the row's height fixes that without disturbing the text column's top alignment. Elementor's own align-self control didn't generate any CSS for this container, so this targets it directly instead. */ .industries-banner .col-lg-9 { align-self: center; } /* Reserved space = nav button pair (2*34 + 8 gap = 76px) + a deliberate 28px breathing gap before the arrows, so the last box never touches them. */ #industriesTrack.industries-owl { position: relative; padding-right: 104px; } .industries-owl .owl-stage-outer { overflow: hidden; } .industries-owl .owl-item { display: flex; } .industry-box { width: 100%; height: 132px; border: 1.5px solid rgba(255,255,255,.65); border-radius: var(--radius-md); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; font-size: .85rem; line-height: 1.1; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px; transition: background .25s ease, transform .25s ease; color: #fff; } .industry-box:hover { background: rgba(255,255,255,.12); transform: translateY(0px); } .industry-box:hover, .industry-box:hover span { color: #fff !important; } .industry-box img { max-width: 100%; width: auto; height: auto; max-height: 46px; object-fit: contain; filter: brightness(0) invert(1); } /* Mobile only: flex children default to min-width:auto (not 0), which keeps the label text at its full unwrapped width instead of letting it wrap inside the narrow 2-up mobile carousel item — the box clips it top full-width both ends instead of wrapping to a second line. Desktop's wider 3/4-up boxes already fit the text on one line, so this never mattered there and stays untouched. */ @media (max-width: 575.98px) { .industry-box span { min-width: 0; width: 100%; white-space: normal; } } /* !important on margin/padding/line-height: owl.theme.default.css adds margin-top:10px to .owl-nav (pushing the arrows below the boxes' vertical center) and padding/line-height on the buttons (pushing the glyph off-center inside the circle). Arrows are now inline SVGs (see owl-init.js), so they center exactly via flex. */ .industries-owl .owl-nav { position: absolute; right: 0; top: 50% !important; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; margin: 0 !important; } .industries-owl .owl-nav button.owl-prev, .industries-owl .owl-nav button.owl-next { width: 34px; height: 34px; margin: 0 !important; padding: 0 !important; line-height: 1 !important; border-radius: 50%; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; transition: background .2s ease, color .2s ease; } .industries-owl .owl-nav button svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .industries-owl .owl-nav button.owl-prev:hover, .industries-owl .owl-nav button.owl-next:hover { background: #fff; color: var(--red); } /* ---------- Accreditations ---------- */ .accred-section { padding: 50px 0 !important; background: var(--light-bg); } .accred-title { font-family: var(--font-head); font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; color: var(--ink); margin-bottom: 20px !important; line-height: 1.1; } /* Unifies Accreditations' heading with every other section title's weight/size (was its own bigger/bolder 800-weight, 2.8rem-max clamp — inconsistent with .section-title's 600-weight, 2.4rem-max used everywhere else). Direct h2 targeting for the same reason as the .section-title rule above: Elementor's own Kit CSS sets these properties directly on .elementor-heading-title. */ .accred-title.elementor-widget-heading .elementor-heading-title { font-size: var(--fs-h2) !important; font-weight: 600 !important; line-height: 1.1 !important; margin-bottom: 1.1rem !important; } .accred-section .section-text { font-size: calc(1.1rem - 2px); line-height: 1.85; margin-bottom: 0; } /* Row uses align-items-stretch so both columns share the same height (the taller one wins); the rules below make the carousel/cards/images fill that stretched height instead of sitting at a fixed 300px, so the content column and the carousel column — and every card's image within the carousel — all line up at equal height. */ .accred-row { --bs-gutter-x: 15px; } .accred-content-col { display: flex; flex-direction: column; justify-content: center; } .accred-carousel-col { display: flex; flex-direction: column; } /* min-height:280px as a guaranteed fallback: the original min-height:0 relies entirely on Owl Carousel's JS running to size this via the equal-height flex-stretch trick with .accred-content-col — if that JS init is ever delayed/skipped, the section collapses to near-zero height instead of showing the cards. This floor keeps it visible either way. */ .accred-carousel-wrap { position: relative; flex: 1 1 auto; min-height: 280px; padding: 0 38px; } @media (max-width: 991.98px) { .accred-carousel-wrap { margin-top: 2rem; } } #accreditationsCarousel, #accreditationsCarousel .owl-stage-outer, #accreditationsCarousel .owl-stage, #accreditationsCarousel .owl-item { height: 100%; } #accreditationsCarousel .owl-stage { display: flex; } .accred-slide { padding: 0 14px; height: 100%; display: flex; } .accred-card { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--radius-lg); padding: 20px; transition: transform .3s ease, border-color .3s ease; width: 100%; display: flex; } .accred-card:hover { transform: translateY(-8px); border-color: rgba(222,0,17,.25); } /* Certificates with a PDF attached wrap the image in a link (opens the full PDF) — the anchor needs to behave exactly like the plain img did before it, since .accred-card is a flex container sizing its single child to fill the card. */ .accred-card a { display: flex; width: 100%; flex: 1 1 auto; min-width: 0; } .accred-slide img { width: 100%; height: 100%; min-height: 260px; object-fit: contain; background: #fff; display: block; } .accred-owl .owl-stage-outer { overflow: hidden; padding: 6px 0 10px; height: 100%; } /* Arrows sit in the side padding added to .accred-carousel-wrap above, clear of both the card edges and the content column's text — dots stay centered below as the only below-carousel control. */ .accred-owl .owl-nav { /* !important on margin/top: owl.theme.default.css's .owl-theme .owl-nav rule (loads after irc-custom.css) sets margin-top:10px and otherwise wins that tie, nudging the arrows off true-center — same load-order issue already hit elsewhere on this carousel. */ position: absolute !important; top: 50% !important; left: -16px; right: -16px; transform: translateY(-50%) !important; display: flex; justify-content: space-between; margin: 0 !important; pointer-events: none; z-index: 2; } .accred-dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 30px; } /* #accredDots is a plain standalone div — it never gets Owl's own .owl-carousel.owl-theme ancestor classes, so neither Owl's default dot theme CSS nor the .owl-dot span rule below (which assumed that structure) ever matched the raw