/* Theme Name: Barebone Theme URI: https://example.com/barebone Author: Your Name Author URI: https://example.com Description: A clean, responsive WordPress theme with a multilevel dropdown navigation. Version: 1.1.3 Text Domain: barebone */ @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); :root { --color-white: #ffffff; --color-surface: #ffffff; --color-text: #2b2b2b; --color-text-muted: #6b6b6b; --color-accent: #ea6a0a; /* orange */ --color-accent-hover: #c4560a; /* dark orange */ --ink:#111111; /* black */ --color-accent-soft: #fdeede; /* soft orange */ --color-border: #e3e3e3; --color-border-soft: #f4f4f4; --color-button: #2e7d32; /* green */ --color-button-hover: #1b5e20; /* dark green */ --color-topbar-bg: #111111; /* black — dark sections / footer */ --color-topbar-text: #e6e6e6; --color-topbar-link: #333333; --color-brand-muted: #8a8a8a; --color-footer-bg: #1a1a1a; --color-mobile-menu-bg: #ffffff; --color-mobile-menu-item-bg: #f4f4f4; --color-mobile-menu-item-bg-hover: #fdeede; --color-mobile-menu-item-bg-active: #f4f4f4; --color-mobile-menu-link: #1f1f1f; --color-mobile-menu-border: #e3e3e3; --color-mobile-menu-hover: #f0f0f0; --color-mobile-menu-hover-strong: #e6e6e6; --color-shadow-soft: rgb(0 0 0 / 0.04); --color-shadow-mobile: rgb(0 0 0 / 0.25); --color-shadow-dropdown: rgb(0 0 0 / 0.08); --color-shadow-menu: rgb(0 0 0 / 0.06); --bg: var(--color-white); --surface: var(--color-surface); --text: var(--color-text); --muted: var(--color-text-muted); --accent: var(--color-accent); --stroke: var(--color-border); --border: var(--color-border-soft); --blue1: var(--color-topbar-link); --blue2: var(--color-accent-soft); --btn: var(--color-button); --btn-hover: var(--color-button-hover); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --shadow: 0 18px 40px -18px rgba(0, 0, 0, .28); /* Site content width. Keep this equal to Elementor's Site Settings → Layout → Content Width so the theme, Bootstrap and plugin containers all line up with Elementor sections. */ --site-width: 1260px; } /* Match Bootstrap's .container (and the CDN's wider xxl step) to --site-width. */ @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: var(--site-width); } } .text-muted{ color: var(--muted) !important;} .text-ink{color: var(--ink) !important;} .text-white{color:#fff !important;} .text-accent{color:var(--accent) !important;} * { box-sizing: border-box; } html { /* Keep in-page anchor targets clear of the fixed header. */ scroll-padding-top: var(--header-height, 84px); } /* Offset the fixed .site-header so page content starts below it. JS keeps --header-height in sync with the header's real rendered height (assets/js/barebone.js); 84px is the pre-JS fallback. The :has() guard means templates without .site-header (e.g. Elementor Canvas) get no offset. */ body:has(> .site-header) { padding-top: var(--header-height, 84px); } /* Front page only: no offset, regardless of what JS measured the header at — bypasses var(--header-height) entirely rather than relying on its fallback, since JS always sets that variable inline on on load. */ body.home:has(> .site-header) { padding-top: 0 !important; } body { margin: 0; padding: 0; font-family:var(--font); -webkit-font-smoothing:antialiased; color: var(--text); background: var(--color-white); line-height: 1.6; } p{ margin: 0 0 20px 0; padding: 0; } a { color: var(--accent); text-decoration: none; transition: 300ms; } img { max-width: 100%; height: auto; } .fw-100{ font-weight: 100 !important;} .fw-200{ font-weight: 200 !important;} .fw-300{ font-weight: 300 !important;} .fw-400{ font-weight: 400 !important;} .fw-500{ font-weight: 500 !important;} .fw-600{ font-weight: 600 !important;} .fw-700{ font-weight: 700 !important;} .fw-800{ font-weight: 800 !important;} .fw-900{ font-weight: 900 !important;} svg.icon{ width: 20px; height: 20px; vertical-align: middle; fill: transparent; stroke: var(--blue1); stroke-width: 2px; } .site-header { background: rgb(255 255 255 / 0.85); color: var(--text); padding: 15px 0; border-bottom: 1px solid rgb(230 234 239 / 0.5); position: fixed; top: 0; left: 0; right: 0; z-index: 10; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); transform: translateZ(0); will-change: backdrop-filter; } .site-branding a { color: var(--text); font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 0.5px; display: inline-flex; align-items: center; } .site-branding p { margin: 4px 0 0; color: var(--color-brand-muted); font-size: 11px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; line-height: 1.2; max-width: 180px; } @media (max-width: 480px) { .site-branding a { font-size: 26px; } .site-branding p { font-size: 10px; } } /* Logo sizing: ensure custom logo displays at 100px height */ .site-branding .custom-logo, .site-branding .custom-logo-link img, .site-branding svg.custom-logo { height: 71px; width: auto; max-width: none; display: inline-block; } @media (max-width: 400px) { .site-branding .custom-logo, .site-branding .custom-logo-link img, .site-branding svg.custom-logo { height: 50px; } } .request-quote { flex: 0 0 auto; } .request-quote a.phoneno { color: var(--color-topbar-bg); font-weight: 600; } .request-quote a.phoneno svg.icon { stroke: var(--color-topbar-bg); } .pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 15px; } a.pill { background: #1f1f1f; border: 1px solid #333333; color: #eeeeee; font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 30px; transition: .15s; display: inline-block; } a.pill:hover { background: var(--accent); border-color: var(--color-accent-hover); color: #fff; } @media (max-width: 768px) { .pills { justify-content: center; } } .link1{ color: var(--accent); font-weight: 700; text-decoration: none; transition: 300ms; font-size: 15px; } .link1:hover{ color: #21476e; } .link1 svg{ stroke: var(--accent); width: 16px; height: 16px; } .link1:hover svg{ stroke: #21476e; } .btn1{ background: var(--btn) !important; color: var(--color-white) !important; border-radius: 5px; padding: 7px 16px; text-decoration: none; text-align: center; display: inline-block; font-size: 14px; font-weight: 600; } .btn1:hover{ background: var(--btn-hover) !important; } @media (max-width: 400px) { .btn1{ border-radius: 2px; padding: 7px 7px; font-size: 14px; } } .btn2{ background: var(--color-white) !important; color: var(--color-text) !important; border-radius: 5px; padding: 15px 26px; text-decoration: none; text-align: center; display: inline-block; font-weight: 700; } .btn2:hover{ background: var(--color-accent-soft) !important; } .btn2 svg{ stroke: var(--color-text) !important; } .btn3{ background: var(--color-white) !important; color: var(--ink) !important; font-size: 15px; border-radius: 8px; padding: 15px 30px; text-decoration: none; text-align: center; display: inline-block !important; font-weight: 700; border: 1px solid #e6eaef; } .btn3:hover{ background: var(--color-white) !important; color: var(--btn) !important; border: 1px solid var(--btn) !important; } .btn4{ background: var(--btn) !important; color: #fff !important; font-size: 15px; border-radius: 8px; padding: 15px 30px; text-decoration: none; text-align: center; display: inline-block !important; font-weight: 700; border: 1px solid var(--btn); } .btn4:hover{ background: var(--btn-hover) !important; color: #fff !important; border: 1px solid var(--btn-hover) !important; } .btn4 svg.icon{ stroke: #fff !important; } /* Tricolour stripe above the footer (full-bleed). */ .in-flag-stripe { display: flex; height: 5px; } .in-flag-stripe span { flex: 1; } .in-flag-stripe span:nth-child(1) { background: #ff9933; } .in-flag-stripe span:nth-child(2) { background: #ffffff; border-block: 1px solid #e5e7eb; } .in-flag-stripe span:nth-child(3) { background: #138808; } .site-footer { padding: 40px 0 0 0; background: var(--color-white); color: var(--muted); font-size: 14px; } @media (max-width: 767.98px) { .site-branding p { margin: 4px auto 0 auto; } } @media (min-width: 768px) { .site-footer { padding: 70px 0 20px 0; } } .site-footer img.footerlogo{ width: auto; height: 71px; } .footer-social { display: flex; gap: 10px; margin-top: 18px; justify-content: center; } @media (min-width: 768px) { .footer-social { justify-content: flex-start; } } .footer-social a { width: 38px; height: 38px; border-radius: 9px; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: #a9bace; transition: .15s; } .footer-social a:hover { background: var(--accent); color: var(--color-white); } .footercontact { display: flex; align-items: flex-start; justify-content: center; gap: 12px; margin-bottom: 16px; } @media (min-width: 768px) { .footercontact { justify-content: flex-start; } } .footercontact .icon { width: 20px; height: 20px; flex-shrink: 0; fill: transparent; stroke: var(--color-text-muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .footercontact span { line-height: 1.5; } /* nudge the icon down to sit on the first text line */ .footercontact .icon { margin-top: 2px; } .site-footer ul.menu{ margin: 0; padding: 0; list-style: none; } .site-footer ul.menu li{ margin: 0 0 10px 0; padding: 0; } .site-footer ul.menu li a, .footercontact a{ color:var(--muted); } .site-footer ul.menu li a:hover, .footercontact a:hover{ color:var(--accent); } .site-footer .sub-menu{ display: none; } .copy{ border-top: 1px solid #ccc; background-color: #f3f3f3; padding: 20px 0; font-size: 13px; color:var(--muted); } .copy .back-to-top{ color: var(--muted); font-weight: 600; cursor: pointer; } .copy .back-to-top:hover{ color: var(--accent); } @media (min-width: 768px) { .site-footer .row > .col-md-3:first-of-type { width: 31%; padding-right: 60px; } .site-footer .row > .col-md-3:not(:first-of-type) { width: 23%; } } /* Add white background, light gray border, and soft box shadow to the review cards */ html body .ti-widget.ti-goog .ti-review-item > .ti-inner { background-color: #ffffff !important; background: #ffffff !important; border: 1px solid #edf2f7 !important; /* Light gray border */ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 7px 7px -1px rgba(0, 0, 0, 0.03) !important; border-radius: 12px !important; } /* Fix text contrast so it remains readable on the new white background */ html body .ti-widget.ti-goog .ti-name, html body .ti-widget.ti-goog .ti-review-content, html body .ti-widget.ti-goog .ti-date { color: #1a202c !important; } /* Add a safety padding cushion to the wrapper so the shadow doesn't clip into adjacent layout sections */ html body .ti-widget.ti-goog .ti-reviews-container-wrapper { padding-top: 15px !important; padding-bottom: 25px !important; } .pabs{ position: absolute !important; width: 130px !important; padding: 7px 10px !important; background-color: var(--color-accent) !important; top:-15px !important; left:50% !important; margin-left: -65px !important; } .vi { width: 48px; height: 48px; border-radius: 12px; background: var(--color-accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } @media (max-width: 768px) { .vi { margin-left: auto; margin-right: auto; } } .vi svg.icon{ stroke: var(--accent); } .div1:hover{ position: relative; transition: 300ms; transform: translateY(-6px); } .hero-badges { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; color: var(--muted); } .custom-subtitle{ margin-bottom: 20px; max-width: 800px; } .hero-badges span { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); } .hero-badges svg.icon { stroke: var(--accent) !important; } @media (max-width: 768px) { .hero-badges { justify-content: center; text-align: center; } } .page-hero { background: var(--color-topbar-bg); color: var(--color-topbar-text); padding: 60px 0 50px 0; } .breadcrumbs { font-size: 14px; color: var(--color-white); margin-bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-start; /* Default left alignment on desktop */ } .breadcrumbs a { color: var(--color-white); } .breadcrumbs a:hover { color: var(--color-accent); } .breadcrumbs span { display: inline-block; } @media (max-width: 768px) { .breadcrumbs { justify-content: center; /* Centers the flex items on mobile */ } } /* Single event body. Width is left to the page builder: .single-event stays full-width so an Elementor Container (boxed) can centre itself and full-width sections can break out. Plain, non-Elementor content is centred to the site width. */ .single-event { padding: 40px 20px; } .single-event > .page-content > :not(.elementor) { max-width: var(--site-width); margin-inline: auto; padding-inline: 16px; } .single-event > .event-featured, .single-event > p { max-width: var(--site-width); margin-inline: auto; } /* ========================================================================== Blog — post listing (index.php) + single post (single.php) ========================================================================== */ .site-main > .container { padding-top: 48px; padding-bottom: 64px; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } @media (max-width: 991px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } @media (max-width: 640px) { .post-grid { grid-template-columns: minmax(0, 1fr); } } .post-card { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden; } .post-card__media { display: block; aspect-ratio: 16 / 9; background: var(--color-border-soft); overflow: hidden; } .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; } .post-card__media:hover img { transform: scale(1.05); } .post-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; } .post-card__meta { margin: 0; font-size: 13px; color: var(--muted); } .post-card__title { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.3; } .post-card__title a { color: var(--text); } .post-card__title a:hover { color: var(--accent); } .post-card__excerpt { margin: 0; font-size: 14px; color: var(--muted); } .post-card__excerpt p { margin: 0; } .post-none { padding: 40px 0; text-align: center; color: var(--muted); } /* the_posts_pagination() */ .pagination { margin-top: 48px; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 8px; color: var(--text); font-size: 14px; font-weight: 600; } .pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; } .pagination a.page-numbers:hover { border-color: var(--accent); color: var(--accent); } .pagination .page-numbers.dots { border-color: transparent; } /* Single post */ .entry-featured { max-width: var(--site-width); margin-inline: auto; } .entry-featured img { width: 100%; border-radius: 10px; } .post-nav { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-border); } .post-nav__link { flex: 1 1 240px; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--color-border); border-radius: 10px; color: var(--text); font-weight: 600; } .post-nav__link:hover { border-color: var(--accent); color: var(--accent); } .post-nav__link--next { text-align: right; } .post-nav__link span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } /* ========================================================================== 404 ========================================================================== */ .error-404 { max-width: 640px; margin: 0 auto; padding: 24px 0 16px; text-align: center; } .error-404__code { margin: 0 0 8px; font-size: clamp(72px, 16vw, 140px); font-weight: 800; line-height: 1; color: var(--color-border); } .error-404__actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; justify-content: center; margin-bottom: 28px; } .error-404__search { margin-bottom: 8px; } .error-404__search .search-form { display: flex; gap: 8px; max-width: 420px; margin: 0 auto; } .error-404__search .search-field { flex: 1; padding: 11px 14px; font: inherit; font-size: 15px; border: 1px solid var(--color-border); border-radius: 8px; } .error-404__search .search-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } .error-404__search .search-submit { padding: 11px 20px; font: inherit; font-weight: 600; color: #fff; background: var(--btn); border: 0; border-radius: 8px; cursor: pointer; } .error-404__search .search-submit:hover { background: var(--btn-hover); } /* ========================================================================== Contact page — info block + Contact Form 7 ========================================================================== */ .ct-card { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 28px; } .ct-card__title { margin: 0 0 22px; font-size: 22px; font-weight: 700; color: var(--ink); } /* icon + label + value rows */ .ct-row { display: flex; align-items: flex-start; gap: 14px; } .ct-row + .ct-row { margin-top: 20px; } .ct-row__icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: rgb(46 125 50 / 0.12); color: var(--btn); } .ct-row__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ct-row__text { display: flex; flex-direction: column; gap: 2px; } .ct-row__label { display: block; font-size: 13px; font-weight: 600; color: var(--muted); } .ct-row__value { display: block; font-size: 16px; font-weight: 700; color: var(--ink); } .ct-row__value a { color: inherit; } /* green call-to-action card */ .ct-cta { margin-top: 24px; background: var(--btn-hover); color: #fff; border-radius: 14px; padding: 28px; } .ct-cta h3 { margin: 0 0 10px; font-size: 20px; font-weight: 700; } .ct-cta p { margin: 0 0 20px; font-size: 15px; color: rgb(255 255 255 / 0.85); } .ct-cta .btn2 { font-size: 14px; padding: 12px 22px; } /* --- Contact Form 7 ---------------------------------------------------- */ .wpcf7 { --cf7-border: var(--color-border); } /* When the form sits in an Elementor Shortcode widget, give it the card look. */ .elementor-widget-shortcode .wpcf7 { background: #fff; border: 1px solid var(--color-border); border-radius: 14px; padding: 28px; } @media (max-width: 782px) { .elementor-widget-shortcode .wpcf7 { padding: 22px; } } .wpcf7-form p { margin: 0; } .cf7-field { margin-bottom: 18px; } .cf7-field label { display: block; margin-bottom: 7px; font-size: 14px; font-weight: 600; color: var(--ink); } .cf7-field br { display: none; } .cf7-field .wpcf7-form-control-wrap { display: block; } .cf7-req { color: #d33; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea { width: 100%; padding: 12px 14px; font: inherit; font-size: 15px; color: var(--text); background: #fff; border: 1px solid var(--cf7-border, var(--color-border)); border-radius: 8px; transition: border-color .15s, box-shadow .15s; } .wpcf7-form textarea { min-height: 130px; resize: vertical; } .wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus { outline: none; border-color: var(--btn); box-shadow: 0 0 0 3px rgb(46 125 50 / 0.15); } .wpcf7-form ::placeholder { color: #9aa0a6; } /* consent checkbox */ .wpcf7-form .wpcf7-acceptance, .cf7-consent { display: block; margin-bottom: 20px; font-size: 13px; color: var(--muted); line-height: 1.5; } .wpcf7-form .wpcf7-list-item { margin: 0; display: flex; gap: 8px; align-items: flex-start; } .wpcf7-form .wpcf7-list-item-label { flex: 1; } .wpcf7-form input[type="checkbox"] { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--btn); flex: 0 0 auto; } /* submit button */ .wpcf7-form input[type="submit"], .wpcf7-form button[type="submit"] { width: 100%; padding: 15px 24px; font: inherit; font-size: 15px; font-weight: 700; color: #fff; background: var(--btn); border: 0; border-radius: 8px; cursor: pointer; transition: background .15s; } .wpcf7-form input[type="submit"]:hover, .wpcf7-form button[type="submit"]:hover { background: var(--btn-hover); } .cf7-note { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--muted); } /* CF7 feedback messages */ .wpcf7 .wpcf7-response-output { margin: 18px 0 0; padding: 12px 16px; border-radius: 8px; font-size: 14px; } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border: 1px solid #f0b429; background: #fff8e6; color: #8a5a00; } .wpcf7 form.sent .wpcf7-response-output { border: 1px solid var(--btn); background: rgb(46 125 50 / 0.08); color: var(--btn-hover); } .wpcf7-form .wpcf7-not-valid-tip { display: block; margin-top: 5px; font-size: 12px; color: #d33; } .wpcf7-spinner { margin: 0 0 0 12px; } @media (max-width: 782px) { .ct-card, .ct-cta { padding: 22px; } } /* ========================================================================== Careers page ========================================================================== */ .careers-section { padding-block: 24px 72px; } .careers-section .elementor-heading-title { font-size: clamp(24px, 3vw, 30px); font-weight: 800; color: var(--ink); } /* Why choose us — 6 boxes */ .why-box { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 26px; height: 100%; } .why-box .elementor-icon-box-icon { margin-bottom: 12px; } .why-box .elementor-icon-box-title { margin-bottom: 6px; font-size: 17px; font-weight: 700; color: var(--ink); } .why-box .elementor-icon-box-title > * { font-size: inherit; font-weight: inherit; } .why-box .elementor-icon-box-description { margin: 0; font-size: 14px; color: var(--muted); } /* Open positions — job cards */ .job-card { background: #fff; border: 1px solid var(--color-border); border-radius: 12px; padding: 26px 28px; transition: border-color .15s, box-shadow .15s; } .job-card:hover { border-color: var(--btn); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .25); } .job-tags .elementor-widget-container > p, .job-tags p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .job-tags span { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--color-border-soft); color: var(--muted); } .job-tags span.cat { background: rgb(46 125 50 / 0.12); color: var(--btn-hover); } .job-title .elementor-heading-title { font-size: 20px; font-weight: 700; color: var(--ink); } .job-desc, .job-desc p { margin: 0; font-size: 15px; color: var(--muted); } .job-meta .elementor-icon-list-items.elementor-inline-items { gap: 6px 20px; } .job-meta .elementor-icon-list-item, .job-meta .elementor-icon-list-text { font-size: 13px; color: var(--muted); } .job-meta .elementor-icon-list-icon svg, .job-meta .elementor-icon-list-icon i { color: var(--color-brand-muted); font-size: 13px; } .job-view-btn .elementor-button { padding: 0; border: 0; background: transparent; color: var(--btn); font-weight: 700; fill: var(--btn); white-space: nowrap; } .job-view-btn .elementor-button:hover { background: transparent; color: var(--btn-hover); } .job-view-btn .elementor-button-content-wrapper { display: inline-flex; align-items: center; gap: 8px; flex-direction: row-reverse; } .job-view-btn .elementor-button-icon { margin: 0; } .job-view-btn .elementor-button-icon svg { width: 14px; height: 14px; } @media (max-width: 767px) { .job-card { padding: 20px; } } /* Under banner */ /* top quote bar (service/location pages) */ .quote-bar { background: #fff; border: 1px solid #e6eaef; border-radius: 14px; box-shadow: var(--shadow); padding: 18px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: -38px; position: relative; z-index: 5; } .quote-bar .qb-items { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; } .quote-bar .qb-item { display: flex; gap: 11px; align-items: center; font-size: 15px; color: var(--muted); } .quote-bar .qb-item .qbi { width: 42px; height: 42px; border-radius: 10px; background: var(--color-accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; } .quote-bar .qb-item svg.icon { stroke: var(--accent) !important; } .quote-bar .qb-item b { display: block; color: var(--ink); font-size: 15px; line-height: 1.2; } .quote-bar .qb-item span { font-size: 12.5px; color: var(--muted); } .quote-bar .qb-cta { display: flex; gap: 12px; flex-wrap: wrap; } .quote-bar.sticky-bar { position: sticky; top: 84px; margin-top: 0; } /* Mobile Breakpoint */ @media (max-width: 760px) { .quote-bar { flex-direction: column; align-items: stretch; gap: 18px; margin-top: -26px; } .quote-bar .qb-items { flex-direction: column; gap: 14px; align-items: flex-start; } .quote-bar .qb-cta .btn { width: 100%; justify-content: center; } .quote-bar.sticky-bar { position: static; } } /* END Under banner */ .pill { display: inline-flex; align-items: center; gap: 7px; background: var(--color-accent-soft); color: var(--color-accent); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 6px 13px; border-radius: 30px; } .pill svg.icon{ stroke: var(--accent) !important; } .hl-ic { width: 46px; height: 46px; border-radius: 11px; background: #1f1f1f; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .hl-ic svg.icon{ stroke: var(--accent)!important; } .num { width: 46px; height: 46px; border-radius: 12px; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; flex: none; } @media (max-width: 767px) { .num { margin: 0 auto 15px auto; } }